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

Блок @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 в любом поисковике.

Полезные ссылки

• поддержка шрифтов по данным caniuse.com:
  • поддержка @font-iface;
  • поддержка шрифтов EOT, WOFF, SVG, TTF/OTF, WOFF2.
• Bulletproof @font-face Syntax;
• The New Bulletproof @Font-Face Syntax;
• Further Hardening of the Bulletproof Syntax;
• Про старые IE, EOT и CSS3111.