Объявление @ font-face в css не работает

Question

Я помогаю моей сестре конвертировать веб-сайт, который кто-то сделал для нее в мгновение ока, в HTML.

Они используют причудливые шрифты во флэш-памяти, которые я пытаюсь определить в файле CSS через @ font-face. Я попытался открыть страницу в Firefox, IE и Chrome, но нигде не вижу правильного шрифта.

Объявление, которое я использую:

@font-face {
  font-family: "VAG Rounded";
  src: url("http://judith.huinink.net/chilax/VAGROUNL.OTF");
}

http://judith.huinink.net/chilax/index.htm содержит HTML.

http://judith.huinink.net/chilax/chilax.css содержит полный CSS.

Я проверил, что могу загрузить файл шрифта, но он просто не использует шрифт при открытии страницы в браузере. Я должен что-то упускать из виду. У кого-нибудь есть предложения?

Answer 1

шрифт становится мейнстримом

По состоянию на январь 2010 года все основные новые браузеры поддерживают font-face

• Safari 3.1
• IE - все версии
• Firefox 3.6
• Chrome 4
• Опера 10

См. http://webfonts.info/wiki/index.php?title=@font-face_browser_support

Answer 2

Обновление

В прошлом году поддержка шрифтов в браузере значительно улучшилась. Я бы посоветовал прочесть замечательную статью Тима Брауна на эту тему , в которой подробно описывается, как заставить веб-шрифты работать в большинстве современных браузеров.

Оригинальный ответ

В реалистическом смысле, @font-face сейчас совершенно непригоден. Его поддерживают только два браузера - Internet Explorer для Windows версии 5 или выше и Safari 3.1.

Хуже того, IE и Safari не поддерживают одинаковые форматы шрифтов. IE поддерживает только EOT , а Safari поддерживает более распространенные форматы TrueType (.ttf) и OpenType (.otf).

Answer 3

Почти нет браузеров, поддерживающих @ font-face: Когда я могу использовать ...

Answer 4

http://www.css3.info/preview/web-fonts-with-font-face/

Answer 5

Как использовать @ font-face во всех браузерах, которые его поддерживают: в блог Джона Тангерина

ttf2eot - это хороший конвертер шрифтов для Unix и Windows, так что вам не придется использовать ужасный старый Microsoft WEFT. Он преобразует весь шрифт, а не только некоторые символы.

Вот javascript для использования с sIFR, который отключает sIFR для браузеров с поддержкой @ font-face.

Flash должен умереть, так что вот еще одна альтернатива sIFR: facelift . Это серверный скрипт, который генерирует изображения.

Проблема с afaik всеми заменами sIFR заключается в том, что выделение и копирование текста на самом деле не работают - вы либо не видите выделение, либо невозможно выделить меньше слова или строки. Также есть Cufón, который использует , поэтому он работает только в новых браузерах, большинство из которых в любом случае имеют @ font-face.

Сделайте все правильно, используйте современную технологию: @ font-face с TTF или OTF и запасные варианты для IE и старых браузеров. Желательно содержать ваш HTML в чистоте и реализовывать эти запасные варианты в отдельных файлах JavaScript и CSS. Для IE вам может понадобиться использовать «условные комментарии», как описано в моей первой ссылке выше. Для браузеров с отключенным javascript всегда указывайте список замещающих шрифтов с веб-безопасными шрифтами в конце.

Answer 6

Я сталкивался с ситуациями, когда WWW должен быть включен в домен. Без него это не сработало бы.

Answer 7

Проверьте когда-либо популярные sIFR или без флэш-зависимости, typeface.js