- 26.05.16
- 14:27
- 4143
- 1
Блок @font-face
, не содержащий шрифтов в виде base64 и ориентированный на поддержку в IE6-8, выглядит так:
1 2 3 4 5 6 7 8 9 |
@font-face { font-family: 'FontFamily'; /* остальные атрибуты */ src: url('font.eot'); /* IE9-11, режимы совместимости 5-8 */ src: url('font.eot?') format('embedded-opentype'), /* IE 6-8 */ url('font.ttf') format('truetype'), /* Android, iOS, Safari */ url('font.woff') format('woff'), url('font.svg#fontId') format('svg'); /* iOS */ } |
Одна версия 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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
@font-face { /* блок для IE6-8 */ font-family: 'FontFamily'; /* остальные атрибуты */ src: url('font.eot?') format('embedded-opentype'); } @font-face { /* блок для IE9+, включая режимы совместимости */ font-family: 'FontFamily'; /* остальные атрибуты */ src: url('font.eot'); /* режимы совместимости 5,7,8 в IE9+ */ src: url(data:font/woff;charset=utf-8;base64,d09GRgABAAAA...VtKAAA=) format('woff'), url(data:font/truetype;charset=utf-8;base64,AAEAAAAV...IoAAA==) format('truetype'), ... url('font.svg#fontId') format('svg'); } |
Замечание 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:
- Bulletproof @font-face Syntax;
- The New Bulletproof @Font-Face Syntax;
- Further Hardening of the Bulletproof Syntax;
- Про старые IE, EOT и CSS3111.
Если у вас не хватает, например, одного из этих форматов, то вы можете создать его с помощью генератора шрифтов Font Squirrel.