Работает ли @ font-face во всех браузерах?

Question

Работает ли @ font-face во всех браузерах?

Как использовать @ font-face?

Answer 1

Проверить: @ поддержка браузера font-face

Webkit / Safari

• с версии 3.1
• форматы шрифтов:
  • TrueType / OpenType TT (.ttf)
  • OpenType PS (.otf)
  • SafariMobile (iPhone / iPad): только шрифты SVG
• Подробнее: http://webkit.org/blog/124/downloadable-fonts/
• Wiki: Примеры кода

Opera

• так Opera 10: http://www.opera.com/browser/ и Opera Mobile 9,7
• форматы шрифтов:
  • TrueType / OpenType TT (.ttf)
  • OpenType PS (.otf)
  • SVG (.svg)
• Подробнее: http://dev.opera.com/articles/view/seven-web-fonts-showcases/

Internet Explorer

• начиная с IE 4
• форматы шрифтов:
  • Embedded OpenType (EOT), созданный инструментом WEFT от Microsoft
  • WOFF начиная с IE9
• Подробнее: http://www.microsoft.com/typography/web/embedding/default.aspx
• Wiki: Примеры кода

Mozilla / Firefox

• начиная с Firefox 3.5
• форматы шрифтов
  • TrueType / OpenType TT (.ttf)
  • OpenType PS (.otf)
  • WOFF (начиная с Firefox 3.6)
• Wiki: Примеры кода

Google Chrome

• В стабильном выпуске Chrome 4.0. По состоянию на 25 января 2010 года
• В Chrome 3.0 вы можете запустить исполняемый файл с ключом командной строки: --enable-remote-fonts 1
• Он был отключен по умолчанию для проверки безопасности: 2 [3], [4]
• Подробнее о Chrome и @ font-face можно узнать здесь
• форматы шрифтов
  • TrueType / OpenType TT (.ttf)
  • OpenType PS (.otf)
  • WOFF начиная с версии 6

Netscape

• начиная с версии 4, прекращено с Netscape Navigator 6
• форматы шрифтов:
  • Переносимый шрифт (.pfr)
• больше информации: http://en.wikipedia.org/wiki/TrueDoc

Что касается использования, проверьте это:

• Потенциал веб-типографии:

Answer 2

Я настоятельно рекомендую вам использовать http://www.fontsquirrel.com/fontface/generator для создания шрифтов и CSS для использования.

Он будет работать во всех браузерах мгновенно. Я попытался исправить это сам, но есть некоторые раздражающие различия, с которыми нужно справиться. Также было сложно заставить его работать в браузере Android и IE8 и ниже.

Используя веб-сайт выше, вы получите его работоспособным быстро без каких-либо JavaScript или других хаков.

Answer 3

Не все браузеры, но все крупные (Chrome, IE, FireFox, Opera, Safari).Пост Сарфраза показывает, с чем он будет работать.

Вот пример того, как его использовать:

@font-face {
font-family: DeliciousRoman;
src: url(/Delicious-Roman.otf);
}

Answer 4

Вы всегда можете спросить: http://caniuse.com/#search=font-face