Подтвердить что ты не робот

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?

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

И.. относительно @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 может изменить настройки системы, чтобы показать диалога при попытке доступа к локальный() шрифт, доступный вне Библиотеки/Шрифтов. Более детально на моей пуленепробиваемой почте. Шрифт Explorer X также известный, чтобы испортить другие вещи в Firefox.

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

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

Ответ 2

Локальный (☺︎) является css-хаком для переадресации 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 будет анализироваться снизу вверх.