Какие браузеры поддерживают встраивание шрифтов

Question

Я читал о правиле @ font-face и пытался понять, стоит ли его использовать в проекте, чтобы отображать "franklin gothic medium" для заголовка вместо чего-то вроде sIfr. Я подумал, что для браузеров, которые его не поддерживают, я могу использовать Arial.

Дело в том, что у меня возникают проблемы с получением окончательного ответа о том, какие браузеры поддерживают встраивание шрифтов таким образом.

До сих пор я работал с IE, но не поддерживает файлы .ttf. В других браузерах я не уверен.

Если бы кто-нибудь мог указать мне на какую-то таблицу совместимости, это было бы замечательно.

Jon

Answer 1

В этой статье обсуждается поддержка браузера на полпути. Вот самый важный момент, хотя все это стоит прочитать:

CSS3 (и даже черновики CSS2 в 1997 и 1998 годах) давно обещали стандартизированный способ встраивания шрифтов, используя правило @ font-face. Многие люди, вероятно, не знают, что это правило уже поддерживается в Opera 9.5, поставляющей версии Safari для Mac, Windows и iPhone OS, и обещано для Firefox 3.1., А также для IE6 и более поздних версий. >
К сожалению, хотя на поддержку Opera 9.5 и Firefox 3.1 была намекает на поддержку @ font-face (см. Мои комментарии на # 4 ниже), на самом деле это не так.

Хотя есть одна загвоздка. Все браузеры, кроме IE, поддерживают ссылки на файлы шрифтов TrueType. Microsoft поддерживает только собственный формат файла EOT.

РЕДАКТИРОВАТЬ: Включая это обновление из Рик Токио ответ.

[Обновление 2] Opera 10 и Firefox 3.1 теперь поддерживают ссылки на TrueType и OpenType (но не EOT) в текущих альфа-версиях или бета-версиях.

Answer 2

Safari 3.1 (и Webkit Nightly builds), Firefox 3.1 и Opera 10 поддерживают встраивание @ font-face для .ttf (шрифты TrueType) и .otf (шрифты OpenType). Internet Explorer версии 5+ поддерживает встраивание @ font-face только для .eot (проприетарный встроенный формат открытого типа).

Microsoft выпускает ужасный маленький инструмент преобразования шрифтов под названием WEFT (только для Windows), который можно использовать для преобразования большинства форматов шрифтов в .eot.

CSS3.info имеет хороший, краткий учебник о том, как использовать правило @ font-face. Сайт является отличным ресурсом для игры с трюками CSS3 (или в данном случае трюки, предложенные CSS2).

Более подробная статья на эту тему: A List Apart .

Убедитесь, что все шрифты, которые вы встраиваете в веб-страницу, заявляют, что это допустимо в их лицензиях, так как шрифт будет размещаться на вашем веб-сервере в общедоступном каталоге и доступен для свободного скачивания. Это использование не всегда явно указано в лицензии, но вы можете связаться с разработчиком напрямую, чтобы спросить. Обычно они позволяют вам использовать шрифт, если вы добавляете ссылку на их страницу. Я не знаю наверняка, одобрен ли Franklin Gothic Medium для такого использования, но я сомневаюсь, что это так.

Вот несколько ресурсов для бесплатных шрифтов. Если вы достаточно копаете, вы можете найти такое лицо, которое подойдет вам:

• Рэй Лараби
• Дитер Штеффман
• Йос Буивенга

Answer 3

@ nezroy, здесь - это обновление:

[Обновление 2] Opera 10 и Firefox 3.1 теперь поддерживают ссылки на TrueType и OpenType (но не EOT) в текущих альфа-версиях или бета-версиях.

Answer 4

веб-набор также делает

Режим причуд долгое время был хорошим ресурсом для таблиц совместимости для js и css

Answer 5

Написал об этом здесь:

http://interactivity.ifactory.com/2010/04/font-face/

В основном 95% современных браузеров теперь поддерживают это:

IE6 +, FF 3.5+, Chrome, Safari 3.1+, Opera.

Answer 6

ОК, поэтому я думаю, что лучший способ сделать это следующим образом ...

• Использовать шрифт ttf в первом случае
• Используйте OET-шрифт для IE
• Используйте Arial без засечек для браузеров, которые вообще не поддерживают встроенные шрифты.

Отлично, теперь нужно найти некоторые EOT-шрифты.

Answer 7

Если вы не боитесь какого-то Java-скрипта, эта статья может вам помочь: http://www.webresourcesdepot.com/use-any-font-via-javascript-typefacejs/.

Я не использовал его сам, но он обещает поддерживать любой шрифт в любом браузере ...

Answer 8

Я вспоминаю, как люди Safari с гордостью писали в блоге, что Webkit может загружать шрифты ttf и использовать их автоматически, когда они находятся в исходном коде страницы. IE поддерживает загрузку растровых шрифтов навсегда.

Answer 9

Они не делают, лучше всего сделать что-то вроде следующего:

<h1 id="MyHeading">my heading</h1>

h1#MyHeading {
    text-indent: -1000px;
    width: 200px;
    height: 50px;
    background-image: url(myheading.jpg);
}

Эта статья объясняет некоторые другие альтернативы.

Редактировать: я не знаю, почему это было понижено. Суть в том, что нет доступного, дружественного к SEO способа делать то, что вы хотите, который поддерживается всеми браузерами. Если вы хотите оттолкнуть своих пользователей, воспользуйтесь одним из других решений. В противном случае, мои пользователи будут довольны моим -1.