Если у меня есть только WOFF и EOT, какие браузеры я поддерживаю с @ font-face?

16

Мы смотрим на покупку шрифта, который позволяет использовать его в Интернете только в предоставленных форматах: WOFF и EOT.

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

Мой единственный опыт связан с синтаксисом fontspring, который имеет EOT, WOFF, TTF и SVG.

Erik
источник
Связанный вопрос на сайте графического дизайна: какой самый маленький набор форматов веб-шрифтов, который охватывает все браузеры?
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 : я составил таблицу, чтобы вы могли просматривать поддержку бок о бок

поддержка браузера @ font-face вообще

поддержка браузера @ font-face вообще

EOT поддержка браузера

EOT поддержка браузера

Поддержка браузера WOFF

Поддержка браузера WOFF

Поддержка браузера SVG

Поддержка браузера SVG

Поддержка браузера TTF

Поддержка браузера TTF

toomanyairmiles
источник
3
почему eot объявляется двумя разными способами - .eot и .eot? #iefix?
Сам
1
@sam stackoverflow.com/questions/8050640/…
Диего Агулло
2
Для тех, кто проверяет этот ответ в будущем ... Android> = 4.4 теперь поддерживает WOFF caniuse.com/#feat=woff
ozke
3
Уважаемый @ozke, я из будущего, спасибо, что поделились этим полезным фактом. Возможно, вам также будет интересно узнать, что к концу 2015 года использование не поддерживаемых версий стандартного браузера Android woffупадет до менее чем 2% пользователей по всему миру, а стандартный браузер Android затмит Chrome для Android (16%) и UC (8%), оба из которых поддерживают woff. Firefox для Android тоже; Однако его использование никогда не будет превышать 1%. Теперь вы можете вернуться к прослушиванию «All About That Bass» Меган Трейнор, которое, как я понимаю, было принято в октябре 2014 года.
user56reinstatemonica8
так что теперь вам нужны только веб-шрифты?
SuperUberDuper
1

SVG никуда вас не приведет с @ font-face; но EOT поддерживается IE; где as, 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.
Джефф Лангемайер
На самом деле вы можете. Я построил несколько сайтов, которые имеют 100% охват, покупая шрифты всех четырех типов или используя бесплатные шрифты и создавая файлы самостоятельно - работает отлично.
toomanyairmiles
@toomanyairmiles Это то, где быстрая и свободная печать убивает меня, это необходимо. Не всегда можно охватить 100%, иногда этого не происходит, и дизайнеру необходимо помнить, что в худшем случае, когда люди используют старые браузеры и тому подобное, 100 % покрытия не всегда означает 100% покрытие; где я нахожусь примерно в 40-50% интернет-пользователей, которые все еще используют IE 7 или старше, которые, во-первых, не очень хорошо поддерживают шрифтовое лицо, чтобы иметь истинное 100% покрытие, нужно заключить, что выглядит "прилично" или, по крайней мере, держит ваш сайт в пределах ограничений "причудливых" шрифтов.
Джефф Лангемайер
Ну, я попробовал это на небольших сайтах и ​​сайтах крупных брендов. Шрифты работают в IE6 и 7, качество рендеринга такое же, как у современного браузера? Нет, но работает просто отлично.
toomanyairmiles
1

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

eburnett
источник
1
Подожди, почему? EOT был мертв, когда этот вопрос был задан впервые, это был гниющий труп, когда вы ответили, и сегодня я не видел шрифта EOT более года.
SilverbackNet