Почему мы должны включать ttf, eot, woff, svg,… в font-face


299

В CSS3 font-face , существует множество типов шрифтов включены как ttf, eot, woff, svgи cff.

Почему мы должны использовать все эти типы?

Если они являются особенными для разных браузеров, почему их число больше, чем число основных веб-браузеров?

Ответы:


425

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

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

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

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

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


8
iOS 5 поддерживает WOFF.
Роб

70
woff... есть режим, который останавливает людей пиратский шрифт ? Как на земле это может работать?
Марк Амери

12
TTF не должен быть легче, чем WOFF. WOFF - это сжатая форма шрифта TrueType - OpenType (ttf и otf).
toto_tico

7
Смысл ВФФ не в борьбе с пиратством. По словам TypeKit , «два основных преимущества шрифтов OpenType / CFF по сравнению со шрифтами TrueType: 1) их меньший размер файла и 2) им требуется гораздо меньше информации хинтинга, чтобы хорошо визуализировать в средах, которые допускают некоторую форму сглаживания. "
Майкл МакГиннис,

8
Инструменты @Zelphir затрудняют создание встраиваемых шрифтов с этим флагом, а ваш обычный дизайнер неграмотен в программировании и может удалить флаг, только если кто-то разработал приложение для Mac с блестящей кнопкой «пиратский шрифт». Более того, если они являются корпорацией, вы можете предъявить судебные обвинения. Если они - какой-то парень с блогом, поговорите с ним, проваливайте это, принимайте, и т.д. чем необходимость убедить их просто поменять его на ближайшую вещь на dafont.
Камило Мартин

21

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

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

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


3
Я не вижу ничего особенного на этом сайте. Если я копирую его в редактор (имеет поддержку utf8), я все равно вижу только обычный текст. Что именно делает этот woff?
Зельфир Кальцталь

4
Две трети этого ответа либо неверны, либо не имеют значения. Также эта ссылка не работает.
Yay295

12

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.