Как исправить глюки @font-face в Firefox 3.5

В существующем коде у меня были объявления 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.


html fonts css font-face firefox3.5
person Community    schedule 14.09.2009    source источник
comment
Не уверен, что это поможет вам, но вам может пригодиться пуленепробиваемая реализация @font-face Пола Айриша: paulirish.com/2009/bulletproof-font-face-implementation-syntax   -  person Dominic Rodger    schedule 14.09.2009
comment
Вспышка нестилизованного содержимого — это проблема, специфичная для Firefox. Их реализация показывает содержимое во время загрузки шрифта (поэтому это должно прекратиться, как только шрифт окажется в кеше пользователя). Сейчас мало что можно с этим поделать. Safari ждет, пока шрифт загрузится, прежде чем отобразить его. Я вижу причины, лежащие в основе обоих способов сделать это, особенно учитывая, что некоторые шрифты могут весить более мегабайта, и не все используют широкополосный доступ.   -  person Olly Hodgson    schedule 14.09.2009
comment
Что касается курсива, для IIRC Firefox требуется курсивная версия шрифта. Он не подделает, если его нет.   -  person Olly Hodgson    schedule 14.09.2009
comment
Олли, как бы я это сделал конкретно, шрифт, который я использую, не имеет отдельных файлов ttf для курсива и жирного шрифта (на самом деле кажется, что нормой является только один файл для всех трех). Что конкретно мне нужно сделать в отношении объявлений @font-face, чтобы Firefox отображал курсив и полужирный шрифт (я думаю, что уже пробовал некоторые варианты). Если в стиле тела, вы просто говорите body { FONT-FAMILY : ШрифтX; FONT-SIZE: 140%;} например, и FontX находится в системе пользователя, Firefox отображает курсив и жирный шрифт.   -  person    schedule 14.09.2009
comment
Олли, теперь я вижу, что вы подразумеваете, что если есть только один файл шрифта, то это означает, что в этом файле нет информации, выделенной курсивом или жирным шрифтом, и браузер должен подделать ее, чего FireFox не сделает - это правильно?   -  person    schedule 14.09.2009

Ответы (2)


arrow_upward
0
arrow_downward

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

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

person cllpse    schedule 14.09.2009
comment
Для небольших фрагментов текста я могу убедиться, что шрифты Cufon работают намного лучше. Ну, на самом деле, их интерфейс не так запутан, как siFR, и для небольших фрагментов текста они отлично работают с нулевой задержкой (если вы используете их команду now()). Я читал о значительной задержке с siFR (а также с его флэш-памятью - Cufon не является флэш-памятью). Для больших фрагментов многострочного текста я столкнулся с некоторыми проблемами с Cufon, которые, вероятно, решаемы, поскольку они предоставляют много документации. - person ; 14.09.2009
comment
Да. Cufon кажется более простым в использовании. Лично я предпочел бы sIFR Cufon из-за возможности выбора текста в sIFR. А сочетание sIFR с jQuery упрощает выбор материалов для поддержки sIFR. На личный вкус, наверное :) - person cllpse; 14.09.2009

arrow_upward
-2
arrow_downward

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

@font-face {
  font-family: ...;
  src: url(...);
  font-style: italic;
}
person Ms2ger    schedule 14.09.2009
comment
Это не заставляло Firefox отображать курсив. Я только что попробовал. - person ; 14.09.2009