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

на С помощью CSS3 font-face, есть несколько типов шрифтов, таких как ttf, eot, woff, svg и cff.

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

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

246
css3 font-face webfonts

3 ответов

короче говоря, шрифт-лицо очень старый, но только недавно был поддержан более чем IE.

  • eot необходим для Интернет-исследователей, которые старше 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

337

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

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

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

21

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

8