CSS - для чего используется генератор веб-шрифта font squirrel

#css #fonts #font-face #webfonts

#css #шрифты #шрифт-лицо #веб-шрифты

Вопрос:

Я думал, что font squirrel генератор веб-шрифтов использовался для создания шрифта, совместимого со всеми браузерами. Но я попробовал классический

 @font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

и это работает для всех последних версий браузеров Google Chrome , Mozilla Firefox , Opera Microsoft Edge и даже Internet Explorer … Используется ли он для более старых версий вышеупомянутого? Спасибо

1. Не совсем понятно, что вы пытаетесь спросить здесь …. сначала вы излагаете мысль, затем говорите, что «это работает», затем спрашиваете, следует ли вам использовать это для чего-то еще?

2. кроме того, вы, похоже, спрашиваете о функции, предлагаемой на каком-либо стороннем сайте, а не о каком-либо неработающем коде или каком-либо конкретном стандарте…. похоже, что это может быть место для вопроса, а не здесь?

3. caniuse.com/?search=@font-face

Ответ №1:

Причина, по которой генераторы веб-шрифтов продолжают генерировать старые шрифты, заключается в том, что они следуют принципу «Если он не сломан, зачем его удалять?».

Например, EOT — это формат шрифта, который все еще иногда появляется в генераторах шрифтов, несмотря на то, что в наши дни он совершенно не нужен. Он поддерживает Internet Explorer 6 …. и если вам ДЕЙСТВИТЕЛЬНО нужно поддерживать браузер, которому 20 лет, Font Squirrel может помочь с этим.

…Но в наши дни вам нужны только WOFF и WOFF2. Другие варианты шрифтов устарели и не нужны, потому что все современные браузеры могут использовать .woff , и большинство может использовать .woff2 .

Вы можете посмотреть совместимость здесь:

WOFF:https://caniuse.com/woff

WOFF2:https://caniuse.com/woff2

EOT:https://caniuse.com/eot

TTF/ OTF:https://caniuse.com/ttf

Ответ №2:

Как вы сказали, решение, предоставляемое Font Squirrel, отлично работает для всех современных браузеров.

Однако, если вам нужно настроить таргетинг на более старые версии, я бы рекомендовалhttps://onlinefontconverter.com которые генерируют более полный CSS @font-face, также предоставляются дополнительные расширения шрифтов.

Я использую следующий CSS, когда мне нужен @font-face:

 @font-face{
  font-family:"Rage Italic";
  src:url("../fonts/RageItalic.eot");
  src:local("RageItalic"), local("RageItalic"), url("../fonts/RageItalic.woff") format("woff"), url("../fonts/RageItalic.ttf") format("truetype"), url("../fonts/RageItalic.svg#RageItalic") format("svg"); 
  font-weight: normal;
  font-style: normal;
}