Відповіді:
Використовуйте лише WOFF2, або якщо вам потрібна застаріла підтримка, WOFF. Не використовуйте жодного іншого формату
( svg
і eot
є мертвими форматами ttf
та otf
є повноцінними системними шрифтами, і їх не слід використовувати для веб-цілей)
Коротше кажучи, шрифт є дуже старим, але лише останнім часом його підтримують більше 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
woff
... чи є режим, який зупиняє людей пірати шрифт ? Як на землі це може / працює?
Woff - це стислий (на блискавці) форму шрифту TrueType - OpenType. Він невеликий і може доставлятись по мережі, як графічний файл. Найголовніше, що таким чином шрифт повністю зберігається, включаючи таблиці правил відображення, про які мало хто дбає, оскільки вони використовують лише латинське письмо.
Погляньте на [мертву URL-адресу видалено]. Шрифт, який ви бачите, - це експериментальний веб-шрифт (woff), який містить тисячі об'єднаних символів, що створюють складні форми. Основний текст - простий латинський код романізованої Сінгали. (Скопіюйте та вставте в Блокнот і подивіться).
Тільки woff може це зробити, тому що ніхто не має цього шрифту, і все ж його бачать де-небудь (Mac, Win, Linux і навіть на смартфонах усіма браузерами, крім IE. IE не має повної підтримки для відкритих типів).
У 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: браузер використовуватиме перший формат, який він підтримує.