Почему мы должны включать ttf, eot, woff, svg,... в шрифт-face

Ответ 1

Ответ в 2019 году:

Используйте только WOFF2, или, если вам нужна традиционная поддержка, WOFF. Не используйте другой формат

(svg и eot являются мертвыми форматами, ttf и otf являются полными системными шрифтами и не должны использоваться в веб-целях)

Оригинальный ответ с 2012 года:

Короче говоря, 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

Ответ 2

Woff - это сжатая (закодированная) форма шрифта TrueType - OpenType. Он небольшой и может быть доставлен по сети, как графический файл. Самое главное, таким образом, шрифт сохраняется полностью, включая таблицы правил рендеринга, о которых мало кто заботится, потому что они используют только латинский script.

Взгляните на [мертвый URL удален]. Шрифт, который вы видите, представляет собой экспериментальную веб-версию smartfont (woff), в которой тысячи комбинированных символов создают сложные формы. Основным текстом является простой латинский код латинизированного Singhala. (Скопируйте и вставьте в Блокнот и посмотрите).

Только woff может это сделать, потому что никто не имеет этого шрифта, и все же его можно увидеть где угодно (Mac, Win, Linux и даже на смартфонах всеми браузерами, кроме IE). IE не имеет полной поддержки Open Types).

Ответ 3

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-формата: браузер будет использовать первый формат, который он поддерживает.