Как исправить ошибки @ font-face в Firefox 3.5 - PullRequest
Новая
       27

Как исправить ошибки @ font-face в Firefox 3.5

1 голос
/ 14 сентября 2009

В существующем коде у меня были объявления CSS @ font-face для встроенных шрифтов .EOT, которые работали безупречно в Internet Explorer. Итак, теперь я прочитал, что Firefox теперь тоже встроен, в 3.5, за исключением того, что он напрямую встраивает шрифты .ttf. Поэтому я изменил объявление @ font-face для firefox и дал ему шанс: 

@font-face {
  font-family: FontX;
  src: url("FontX.eot");   //previous decl.
  src: local("FontX"), url("FontX.ttf") format("truetype");
}

Работает - но вряд ли без нареканий.

Во-первых, курсив и жирный шрифт не отображаются на странице, хотя ранее они отображались шрифтом .EOT.

Вторым и более тревожным является следующее поведение:

Firefox мигает шрифт по умолчанию на полсекунды перед отображением встроенного шрифта ttf!

Это выглядит действительно очень глупо.

Что касается этой второй проблемы, я надеюсь, что можно обойти эту проблему, потому что со встроенными шрифтами Cufon существует точно такая же проблема. Однако они предоставляют JS-функцию Cufon.now (), которую вы вызываете непосредственно перед закрывающим тегом </body>, и это решает проблему для них. Возможно, уже взглянул на код JS для этой функции, но вряд ли я в этом разбираюсь.

Также в IE или Safari отсутствует та же самая прошивка по умолчанию.

Ответы [ 2 ]

0 голосов
/ 14 сентября 2009

Для курсива необходимо добавить 

@font-face {
  font-family: ...;
  src: url(...);
  font-style: italic;
}
0 голосов
/ 14 сентября 2009

Если вы используете только нестандартные шрифты в заголовках и небольшие объемы текста, я бы рекомендовал использовать sIFR . Эта небольшая библиотека JavaScript / Flash работает, заменяя отдельные элементы небольшим легким flash-объектом, который отображает ваши шрифты одинаково во всех браузерах ... Вы даже можете выбрать шрифты, которые генерирует sIFR, так же, как и любой другой текст на вашем веб-страницы.

Взгляните на пример страницы .

...