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

на CSS3font-face, есть несколько типов шрифтов, включенных как ttf,eot,woff,svg и cff.

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

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

3 246
css3 font-face google-webfonts

3 ответа:

короче говоря, font-face очень старый, но только недавно был поддержан более чем 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), который имеет тысячи комбинированных символов, создающих сложные формы. Этот в основе текста лежит простой латинский код латинизированной сингалы. (Скопируйте и вставьте в блокнот и см.).

только 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/ есть пример того, как его использовать.

в основном вы добавляете src url в файл woff2 и укажите формат woff2. Важно, чтобы это до вуф-формат: браузер будет использовать первый формат, который он поддерживает.

8