Якщо у мене є лише WOFF та EOT, які браузери я підтримую за допомогою @ font-face?


16

Ми розглядаємо купівлю шрифту, який дозволяє використовувати його лише в Інтернеті у форматі WOFF та EOT.

Я не впевнений, у яких браузерах вони працюють, і не можу знайти актуальну інформацію. Які браузери я можу підтримувати лише з цими двома?

Мій єдиний досвід - це синтаксис fontspring, який містить EOT, WOFF, TTF та SVG.


Пов’язане запитання на веб-сайті "Графічний дизайн": який найменший набір форматів веб-шрифтів охоплює всі браузери?
user56reinstatemonica8

Відповіді:


23

Це стандартний спосіб завантаження за допомогою @ font-face , хакі виправлень тощо!

@font-face {
    font-family: 'BebasNeueRegular';
    src: url('BebasNeue-webfont.eot');
    src: url('BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('BebasNeue-webfont.woff') format('woff'),
         url('BebasNeue-webfont.ttf') format('truetype'),
         url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Але видаліть SVG, і ви майже втратите підтримку iOS <5.0

Чи можу я використовувати відмінну таблицю для підтримки браузера, як правило, інший для EOT , інший для WOFF , ще один для SVG і нарешті ще один для TTF . Я вставлю їх нижче для наочності, і це повинно орієнтувати вас на тестування, але майте на увазі, що це зміниться досить швидко.

Редагувати wyu : Я склав таблицю, щоб ви могли переглянути підтримку поряд

@ в основному підтримка браузера шрифтів

@ в основному підтримка браузера шрифтів

Підтримка браузера EOT

Підтримка браузера EOT

Підтримка браузера WOFF

Підтримка браузера WOFF

Підтримка браузера SVG

Підтримка браузера SVG

Підтримка браузера TTF

Підтримка браузера TTF


3
чому eot оголошується двома різними способами - .eot та .eot? #iefix?
сам


2
Для тих , хто перевіряє цю відповідь в майбутньому ... Android> = 4.4 тепер підтримує Уофф caniuse.com/#feat=woff
ozke

3
Шановний @ozke, я від майбутнього, дякую за те, що поділився цим корисним фактом. Можливо, вам також буде цікаво знати, що до кінця 2015 року використання версій веб-переглядача Android, які не підтримують woff, знизиться до менш ніж 2% глобальних користувачів, а Chrome-браузер буде затьмарений для Android (16%) та UC (8%), які підтримують woff. Firefox для Android теж; однак його використання ніколи не перевищуватиме 1%. Тепер ви можете повернутися до прослуховування "Все про той бас" Меган Тренер, що, як я розумію, було звичним у жовтні 2014 року.
user56reinstatemonica8

тож вам потрібні лише веб-шрифти зараз?
SuperUberDuper

1

SVG нікуди не потрапить до вас @ font-face; але, EOT підтримується IE; де TTF та OTF підтримуються всіма іншими основними браузерами. Що стосується WOFF, то, якщо читати кілька читань, то, схожі на TTF та OTF, досить ймовірно, що він підтримується в тих же браузерах, що і TTF або OTF. Моя пропозиція, якщо вас справді цікавить, спробуйте кожне розширення @ font-face у веб-переглядачі і подивіться, що ви отримаєте, а потім подайте те, що ви отримали на W3C, щоб оновити свою сторінку стандартів для дескриптора @ font-face. (Наразі воно навіть не включає "безпечні" розширення шрифту).

Якщо все інше не вдається, я впевнений, що W3Schools оновлений: http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp


Проблема полягає в тому, що Safari Mobile 4.1 і нижче підтримує лише SVG.
toomanyairmiles

@toomanyairmiles Ось чому, врешті-решт, це зробить це добре для вашого "за замовчуванням", а потім зробить його дивовижним для тих, хто "може" його переглянути. Не може мати 100% покриття, оскільки більшість шрифтів не мають OTF, EOT та SVG.
Jeff Langemeier

Насправді можна. Я створив декілька сайтів, які мають 100% охоплення, купуючи шрифти, що надходять у всіх чотирьох типах, або використовуючи безкоштовні шрифти та сам генеруючи файли - працює чудово.
toomanyairmiles

@toomanyairmiles Це швидке і невільне введення тексту вбиває мене, не потрібно. Не завжди може бути 100% охоплення, іноді цього не відбувається, і дизайнеру потрібно пам’ятати, що в гіршому випадку, коли люди використовують старі браузери і таке, 100 % покриття не завжди означає 100% покриття; там, де я приблизно 40-50% користувачів Інтернету, все ще використовують IE 7 або старші, які в першу чергу не дуже добре підтримують шрифт, щоб мати справжнє 100% покриття, потрібно мати підсумок виглядає "пристойно" або, принаймні, тримає ваш сайт у межах обмежень "більш фантазійних" шрифтів.
Jeff Langemeier

Що ж, я спробував це на невеликих сайтах та на великих брендах. Чи працюють шрифти в IE6 та 7, наскільки якість візуалізації настільки ж хороша, як і сучасний браузер? Ні, але це працює просто чудово.
toomanyairmiles

1

Постачальникам веб-шрифтів дійсно потрібно надавати еот-підтримку від бати для своїх шрифтів - саме через це! Ви можете подумати, що це буде другою природою, навіть для хмарних даних (з можливістю включити або виключити) - якщо люди змушені шукати шрифти у чорному списку, чи це не заохочуватиме піратство лише після знаходження шрифтів? @ eb_p1


1
Зачекайте, чому? EOT був мертвий, коли вперше було задано це запитання, коли ви відповіли, це був гнилий труп, і сьогодні я не бачив шрифту EOT вже більше року.
SilverbackNet
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.