CSS @ font-face - что означает «src: local ('☺')»?

133

Я использую @font-faceв первый раз и скачал набор шрифтов от fontsquirrel

Код, который они рекомендуют вставить в мой CSS:

@font-face {
    font-family: 'junctionregularRegular';
    src: url('Junction-webfont.eot');
    src: local('☺'), 
        url('Junction-webfont.woff') format('woff'), 
        url('Junction-webfont.ttf') format('truetype'), 
        url('Junction-webfont.svg#webfontoNEpZXy2') format('svg');
}

Теперь, этот смайлик поставил меня в тупик. Но то же самое относится и к количеству URL в src - почему они рекомендуют так много файлов и будут ли они все отправляться в браузер при отображении страницы? Есть ли вред в удалении всех файлов, кроме .ttf?

css font-face stephenmurdoch
источник

Ответы:

94

если вы прочитаете заметки в генераторе шрифтов-font-squirrel, вы увидите, что это был уловок Пола Ириша.

Вот выдержка из его сообщения в блоге :

И .. относительно @font-faceсинтаксиса

Теперь я рекомендую пуленепробиваемый вариант смайлика вместо оригинального пуленепробиваемого синтаксиса.

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺'),
       url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

Из пуленепробиваемого поста:

Да, это смайлик. Спецификация OpenType указывает, что любые двухбайтовые символы Юникода вообще не будут работать с именем шрифта на Mac, так что это уменьшает вероятность того, что кто-то на самом деле выпустил шрифт с таким именем.

Есть несколько причин, почему смайлик является лучшим решением:

  • Программное обеспечение Webkit + Font Management может испортить локальные ссылки, например превратить глифы в блоки A.

  • В OS X программное обеспечение Font Management может изменить системные настройки, чтобы отобразить диалоговое окно при попытке доступа к локальному () шрифту, доступному за пределами библиотеки / шрифтов. Подробнее на моем пуленепробиваемом посте. Также известно, что Font Explorer X портит другие вещи в Firefox.

  • Хотя это маловероятно, вы могли бы сослаться на шрифт local (), который полностью отличается от того, что вы думаете. (Типофилальный пост на разных шрифтах, одно и то же имя) По крайней мере, это риск, и вы передаете контроль над типом как браузеру, так и хост-машине. Этот риск не стоит того, чтобы избегать загрузки шрифта.

Все это довольно серьезные проблемы, но их стоит рассмотреть.

коррозия
источник
12
Большое спасибо, теперь все ясно - я только что нашел эту статью на сайте nicewebtype.com, которая также отвечает на все мои другие вопросы
stephenmurdoch
9
поэтому, по сути, в локальной части этого кода написано «этот шрифт локально известен как X», и мы используем смайлик, чтобы браузер не мог использовать неправильный шрифт с тем же именем (по причинам, указанным выше). приятно :)
abelito
3
Вам действительно нужно local()заявление? Это избыточно? Разве браузер не должен использовать ваш первый url()без него?
Саймон Ист
Когда я просматриваю свой исходный код css в инструментах разработчика Chrome, смайлик выглядит так: «Это правильно?
Энтони
1
@Simon: локальный оператор поддерживает IE6 - 8 (см. Связанный блог), поэтому, если вам не нужны эти браузеры, он необходим.
Stijn de Witt
34

Локальный (☺︎) - это хакерская программа для отвлечения IE6-8 от загрузки шрифтов, которые он не может использовать (он может использовать шрифты только в формате EOT).

Объяснение: последнее свойство src имеет приоритет в каскаде CSS, что означает, что CSS будет анализироваться снизу вверх. Локальная (☺︎) заставит IE пропустить src внизу, не тратя пропускную способность при загрузке шрифтов, которые он не может использовать, и вместо этого перейдет прямо к шрифту в .eotформате (определенном в строке выше в вашем вопросе), который он будет использовать. Смайлик нужен только для того, чтобы гарантировать отсутствие локального шрифта с таким именем (комбинацией символов).

Подробнее читайте здесь: http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

Магне
источник
-3

@ font-face Последнее свойство src имеет приоритет в каскаде CSS, что означает, что CSS будет анализироваться снизу вверх.

LOGU
источник