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

227

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

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

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

Теги:
font-face
webfonts

3 ответа

310
Лучший ответ

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

Поделиться
  • 8
    iOS 5 поддерживает WOFF.
  • 63
    woff ... есть режим, который останавливает людей пиратских шрифтов ? Как на земле это может работать?
Показать ещё 15 комментариев
23

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

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

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

Поделиться
  • 3
    Я не вижу ничего особенного на этом сайте. Если я копирую его в редактор (имеет поддержку utf8), я все равно вижу только обычный текст. Что именно делает этот woff?
  • 4
    Две трети этого ответа либо неверны, либо не имеют значения. Также эта ссылка не работает.
7

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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню