Про @font-face с пояснениями

  • 26.05.16
  • 14:27
  • 3707
  • 1

Блок @font-face, не содержащий шрифтов в виде base64 и ориентированный на поддержку в IE6-8, выглядит так:

Одна версия src (в строке 4) содержит единственный url("font.eot") без директивы format — для режимов совместимости 5-8 в IE9+ (режим можно задать в панели разработчика (F12) на вкладке «Эмуляция»). В этих режимах атрибут с альтернативными шрифтами не будет считаться корректным, поэтому шрифт строго один.

Во втором src (в строке 5) EOT-шрифт в виде 'font.eot?' следует первым — знак вопроса и первоочерёдность здесь обязательны. Причина в том, что в IE < 9 в парсере атрибута src был баг, в результате которого ссылкой на файл считалось всё, что находится между первой открывающей скобкой и последней закрывающей, т. е. "font.eot?...format('svg". Со знаком вопроса всё лишнее становится «аргументами» URL, и ссылка на файл не страдает.

Остальные браузеры разбирают атрибут src нормально и ориентируются на формат.

Подход совместим с:

  • Chrome >= 8;
  • Firefox >= 3.6;
  • IE >= 6 (проверялось в IETester и в IE11 Compat Mode 5-8);
  • Opera >= 11;
  • Safari >= 5.03;
  • Android >= 2.3;
  • iOS >= 3.2.

При использовании base64 следует учесть, что старые IE, наткнувшись на внедрённые в url() данные, посчитают некорректным и проигнорируют весь блок @font-face. Поэтому таких блока должно быть два: один содержит правила только для IE6-8, во втором находится src с base64 и src для режима совместимости (режим не влияет на условные комментарии, поэтому правила для него принадлежат к [if gte IE 9]):

Замечание 1: по данным caniuse.com (на момент последней редакции этой заметки) самыми поддерживаемыми форматами шрифтов являлись:

  • WOFF: 88.13%;
  • TTF/OTF: неограниченная поддержка — 82.3%, поддержка в IE — 7.17%;
    IE поддерживает только разрешённые для установки шрифты. Флаг запрета установки находится в файле шрифта и задаётся производителем.
    Поддержка «разрешённых» TTF составляет 89.47%.

Поэтому внедрять имеет смысл только WOFF или устанавливаемые TTF.

Замечание 2: иногда конвертированный в EOT шрифт приводит к ошибке CSS3111. В некоторых случаях эта проблема решается коррекцией имени шрифта.

Замечание 3: EOT-файл часто указывается как 'file.eot?#iefix'. Причина такова: изначально автор iefix’а задавал шрифт без знака вопроса — в виде 'file.eot#iefix'. На решётку здесь возложена та же задача — отделение имени файла от мусора.

Проблема с таким вариантом возникает при отображении локального документа с локальным файлом шрифта — IE его не находит. Знак же вопроса работает безотказно (предложен полутора годами ранее).

В этом случае фрагмент #iefix оказывается частью следующей за '?' строки «аргументов». Непосредственным значением для стилей он не обладает, но его можно считать чем-то вроде подсказки относительно смысла конструкции — объяснение легко отыскивается по запросу ?#iefix в любом поисковике.

Полезные ссылки
Комментарии
Tom Ferran
30.08.2023
14:43:45

Great article, I also often use Base64 in HTML or CSS, you could even write an article about it, because it’s a very interesting topic.

(I was thinking about this: https://b64encode.com/blog/base64-in-html/)

Индикатор
Шакира
19.06.2017
19:09:13

Если у вас не хватает, например, одного из этих форматов, то вы можете создать его с помощью генератора шрифтов Font Squirrel.

Индикатор
Оставить комментарий

Добавить комментарий