В CSS3 font-face имеется несколько типов шрифтов, включая ttf, eot, woff, svg и cff.
Почему мы должны использовать все эти типы?
Если они являются особыми для разных браузеров, почему их число больше, чем количество основных веб-браузеров?
Используйте только WOFF2, или, если вам нужна традиционная поддержка, WOFF. Не используйте другой формат
(svg и eot являются мертвыми форматами, ttf и otf являются полными системными шрифтами и не должны использоваться в веб-целях)
Короче говоря, font-face очень старый, но только недавно он был поддержан более чем IE.
eot необходим для Internet Explorer, которые старше IE9 - они изобрели спецификацию, но eot был проприетарным решением.
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 - это сжатая (закодированная) форма шрифта TrueType - OpenType. Он небольшой и может быть доставлен по сети, как графический файл. Самое главное, таким образом, шрифт сохраняется полностью, включая таблицы правил рендеринга, о которых мало кто заботится, потому что они используют только латинский script.
Взгляните на [мертвый URL удален]. Шрифт, который вы видите, представляет собой экспериментальную веб-версию smartfont (woff), в которой тысячи комбинированных символов создают сложные формы. Основным текстом является простой латинский код латинизированного Singhala. (Скопируйте и вставьте в Блокнот и посмотрите).
Только woff может это сделать, потому что никто не имеет этого шрифта, и все же его можно увидеть где угодно (Mac, Win, Linux и даже на смартфонах всеми браузерами, кроме IE). IE не имеет полной поддержки Open Types).
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-формата: браузер будет использовать первый формат, который он поддерживает.