Чому ми повинні включати ttf, eot, woff, svg,… у шрифт


299

В CSS3 font-face , існує безліч типів шрифтів включені як ttf, eot, woff, svgіcff .

Чому ми повинні використовувати всі ці типи?

Якщо вони спеціальні для різних браузерів, чому їх кількість перевищує кількість основних веб-браузерів?

Відповіді:


425

Відповідь у 2019 році:

Використовуйте лише WOFF2, або якщо вам потрібна застаріла підтримка, WOFF. Не використовуйте жодного іншого формату

( svgі eotє мертвими форматами ttfта otfє повноцінними системними шрифтами, і їх не слід використовувати для веб-цілей)

Оригінальна відповідь з 2012 року:

Коротше кажучи, шрифт є дуже старим, але лише останнім часом його підтримують більше IE.

  • eot потрібен Інтернет-дослідникам, які старші за IE9 - вони винайшли специфікацію, але eot було захищеним рішенням.

  • ttfі otfце звичайні старі шрифти, тому деякі люди дратуються, що це означає, що кожен може безкоштовно завантажувати дорогі до ліцензії шрифти.

  • Проходить час, SVG 1.1 додає розділ "шрифти", в якому пояснюється, як моделювати шрифт виключно за допомогою розмітки SVG, і люди починають його використовувати. Проходить більше часу, і виявляється, що вони абсолютно жахливі порівняно із звичайним форматом шрифту, і SVG 2 з розумом видаляє всю главу знову.

  • Потім woffвигадуються люди з досить небагатьми знаннями домену, що дає змогу розміщувати шрифти таким чином, що викидає біти, які є критично важливими для встановлення системи, але неактуальні для Інтернету (роблячи людей, які турбуються про піратство), і дозволяє внутрішнє стиснення, щоб краще відповідати потребам Інтернету (роблячи користувачів і хостів щасливими). Це стає бажаним форматом.

  • Редагування 2019 р. Через кілька років woff2розробляється та приймається, що покращує стиснення, що призводить до ще менших файлів, а також можливість завантажувати один шрифт "по частинах", щоб шрифт, що підтримує 20 сценаріїв, міг зберігатися як "шматки" "на диску, натомість браузери можуть автоматично завантажувати шрифт" частинами ", а не потрібно переносити весь шрифт вперед, ще більше покращуючи набір тексту.

Якщо ви не хочете підтримувати IE 8 і новіші версії, i 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
Суть WOFF не в боротьбі з піратством. TypeKit каже: "Два основні переваги шрифтів OpenType / CFF мають над шрифтами TrueType: 1) їх менший розмір файлів, і що 2) їм потрібна набагато менша інформація про підказку для того, щоб добре відобразитись у середовищах, які дозволяють отримати певну форму антизбудження. "
Майкл МакГінніс

8
За допомогою інструментів @Zelphir важко створювати вбудовувані шрифти з цим прапором, а ваш дизайнер, що працює на заводі, є неграмотним і може видалити прапор лише в тому випадку, якщо хтось розробив додаток для Mac із блискучою кнопкою "піратський шрифт". Більше того, якщо вони є корпорацією, ви можете притягнути до кримінальної відповідальності. Якщо це якийсь хлопець з блогом, поговоріть з ними, якщо цього не вдасться, їх хост і т.д. ніж клопот переконати їх просто поміняти його на найближчу річ на дафонті.
Каміло Мартін

21

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

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

Тільки woff може це зробити, тому що ніхто не має цього шрифту, і все ж його бачать де-небудь (Mac, Win, Linux і навіть на смартфонах усіма браузерами, крім IE. IE не має повної підтримки для відкритих типів).


3
Я не бачу нічого особливого на цьому веб-сайті. Якщо я скопіюю його в редактор (має підтримку utf8), я все ще бачу лише звичайний текст. Що саме робить woff?
Зельфір Кальтшталь

4
Дві третини цієї відповіді або неправильні, або неістотні. Також ця ланка порушена.
Yay295

12

У Chrome, Opera та Firefox підтримується WOFF 2.0, заснований на алгоритмі стиснення Brotli та інших удосконаленнях над WOFF 1.0, що дозволяють зменшити розмір файлів на понад 30%.

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.