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?

121
css font-face

3 ответов

Если вы прочитаете заметки в font-squirrel's font-face generator, вы увидите, что это был gotcha пола Айриша.

вот отрывок из его блоге:

и.. в отношении @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 spec указывает, что любые двухбайтовые символы юникода не будут работать в имени шрифта на Mac вообще, так что уменьшает вероятность того, что кто-то действительно выпустил шрифт с таким именем.

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

  • программное обеспечение для управления шрифтами Webkit + может испортить местные ссылки, например превращение символов в блоки.

  • на OS X, программное обеспечение для управления шрифтами может изменять настройки системы показать диалог при попытке доступа к доступный шрифт local() вне библиотеки / шрифтов. Дополнительные подробности на моем пуленепробиваемом столбе. Проводник шрифтов X также известно, чтобы испортить другие вещи в Браузер firefox.

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

Это все довольно крайние проблемы, но это стоит рассмотреть.

89

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

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

подробнее здесь:http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

27

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

-3