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

Я использую @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?

если вы прочитаете заметки в генераторе шрифтов-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 (), который полностью отличается от того, что вы думаете. (Типофилальный пост на разных шрифтах, одно и то же имя) По крайней мере, это риск, и вы передаете контроль над типом как браузеру, так и хост-машине. Этот риск не стоит того, чтобы избегать загрузки шрифта.

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

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

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

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

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