Используйте только WOFF2, или, если вам нужна традиционная поддержка, WOFF. Не используйте другой формат
( svgи eotявляются мертвыми форматами, ttfи otfявляются полными системными шрифтами, и не должны использоваться в веб-целях)
Короче говоря, font-face очень старый, но только недавно он был поддержан более чем IE.
eot нужен для Internet Explorer, которые старше IE9 - они изобрели спецификацию, но это было проприетарное решение.
ttfи otfэто обычные старые шрифты, поэтому некоторые люди раздражались, что это означало, что любой мог бесплатно скачать дорогие для лицензии шрифты.
Проходит время, в SVG 1.1 добавлена глава «Шрифты», в которой объясняется, как моделировать шрифт исключительно с использованием разметки SVG, и люди начинают его использовать. Проходит больше времени, и оказывается, что они абсолютно ужасны по сравнению с обычным форматом шрифта, а SVG 2 снова удаляет всю главу.
Затем, woffизобретается людьми, обладающими достаточным знанием предметной области, что позволяет размещать шрифты таким образом, чтобы отбрасывать биты, которые критически важны для установки системы, но не имеют отношения к сети (делая людей обеспокоенными пиратством счастливыми) и позволяет использовать внутреннее сжатие для лучшего удовлетворения потребностей сети (что делает пользователей и хостов счастливыми). Это становится предпочтительным форматом.
Редакция 2019 года Несколько лет спустя woff2проект составлен и принят, что улучшает сжатие, что приводит к еще меньшим размерам файлов, а также позволяет загружать один шрифт «по частям», так что шрифт, который поддерживает 20 сценариев, может быть сохранен как «чанки». вместо этого - на диске, поскольку браузеры автоматически могут загружать шрифт «по частям» по мере необходимости, а не передавать весь шрифт заранее, что еще больше повышает удобство набора текста.
Если вы не хотите поддерживать IE 8 и ниже, а также iOS 4 и ниже и android 4.3 или более ранние версии, то вы можете просто использовать WOFF (и WOFF2, более сжатый WOFF, для новейших браузеров, которые его поддерживают).
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
}Поддержка woffможет быть проверена на http://caniuse.com/woff
Поддержка woff2может быть проверена на http://caniuse.com/woff2
woff... есть режим, который останавливает людей пиратский шрифт ? Как на земле это может работать?Woff - это сжатая (сжатая) форма шрифта TrueType - OpenType. Он небольшой и может быть доставлен по сети в виде графического файла. Самое главное, что таким образом шрифт полностью сохраняется, включая таблицы правил рендеринга, о которых мало кто заботится, потому что они используют только латиницу.
Посмотрите на [мертвый URL удален]. Шрифт, который вы видите, представляет собой экспериментальный веб-смартфон (woff), в котором есть тысячи комбинированных символов, создающих сложные формы. Основной текст - это простой латинский код романизированного сингхала. (Скопируйте и вставьте в Блокнот и посмотрите).
Только woff может сделать это, потому что ни у кого нет этого шрифта, и все же он нигде не виден (Mac, Win, Linux и даже на смартфонах всеми браузерами, кроме IE. IE не имеет полной поддержки открытых типов).
источник
WOFF 2.0, основанный на алгоритме сжатия Brotli и других улучшениях по сравнению с WOFF 1.0, обеспечивающих уменьшение размера файла более чем на 30%, поддерживается в Chrome, Opera и Firefox.
http://en.wikipedia.org/wiki/Web_Open_Font_Format http://en.wikipedia.org/wiki/Brotli
http://sth.name/2014/09/03/Speed-up-webfonts/ содержит пример того, как его использовать.
В основном вы добавляете URL src в файл woff2 и указываете формат woff2. Важно иметь это до формата woff: браузер будет использовать первый формат, который он поддерживает.
источник