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

В CSS3 font-faceЕсть несколько типов шрифтов, таких как ttf, eot, woff, svg а также cff,

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

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

Источник

3 ответа

Решение

Короче говоря, font-face очень старый, но только недавно он был поддержан более чем IE.

  • eot нужен для Internet Explorer, которые старше IE9 - они изобрели спецификацию, но eot - ужасный формат, который лишает большинство возможностей шрифтов.

  • ttf а также otf это обычные старые шрифты, но некоторые люди раздражаются, что это означает, что любой может загрузить и использовать их.

  • Примерно в то же время iOS на iPhone и iPad реализована svg шрифты.

  • Затем, woff был изобретен, который имеет режим, который останавливает людей пиратского шрифта. Это предпочтительный формат.

Если вы не хотите поддерживать 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. Он небольшой и может быть доставлен по сети в виде графического файла. Самое главное, что таким образом шрифт полностью сохраняется, включая таблицы правил рендеринга, о которых мало кто заботится, потому что они используют только латиницу.

Посмотрите на [мертвый URL удален]. Шрифт, который вы видите, представляет собой экспериментальный веб-шрифт smartfont (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: браузер будет использовать первый формат, который он поддерживает.

Источник
Другие вопросы по тегам