Firefox не распознает шрифт

я укладываю в pre HTML элемент через CSS, как это:

pre {
    font-family : "Franklin Gothic Medium","Arial Narrow Bold","Arial",sans-serif;
}

и он работает в Chrome / Chromium, Opera, Safari и IE (что означает, что шрифт действительно установлен на компьютере), но не в Firefox. Только в Firefox признает Arial.

и я пробовал с другими пользовательскими шрифтами (например,Century Gothic) и он работает, поэтому он может распознавать пользовательские шрифты.

итог, Firefox не распознает Franklin Gothic Medium, ни Arial Narrow Bold даже хотя

  • они установлены в компьютере
  • он способен распознавать другие пользовательские шрифты

что здесь может происходить?

10
css firefox font-face fontfamily fonts

2 ответов

решение не является однозначным. Внешний вид шрифта зависит от браузера, ОС и, конечно, от того, какие шрифты доступны в системе клиента. Не принимайте этот ответ за чистую монету без дальнейшего тестирования на основе вашей целевой аудитории.

в Windows, начиная с Firefox 4 и IE9, шрифты отображаются с использованием DirectWrite вместо GDI. С момента этого изменения шрифты, такие как "Arial Narrow" и "Arial Black", считаются частью семьи Arial, а не отдельными семьями. Так что ... Firefox, вы получаете доступ к Arial Narrow через обычное объявление Arial с некоторыми модификаторами. IE9 работает аналогичным образом, но, похоже, имеет некоторые прагматические Читы, которые заставляют его работать так, как разработчики привыкли.

Франклин Готик Медиум

font-family: "Franklin Gothic Medium", "Franklin Gothic", sans-serif;

все браузеры, кроме Firefox, понимают "Franklin Gothic Medium". Firefox не делает и переходит к следующему выбору, "Franklin Gothic", который вы, возможно, даже не думаете, что у вас есть, но именно там "Franklin Gothic Medium" живет в мире DirectWrite. при отсутствии каких-либо других модификаторов (курсив, жирный, растянуть), мой Firefox захватывает "Franklin Gothic Medium", когда указано "Franklin Gothic".

Arial Узкий Жирный

font-family: "Arial Narrow Bold", "Arial Narrow", "Arial", sans-serif;
font-stretch: condensed;
font-weight: 700;

некоторые браузеры, такие как Chrome и IE7–8, распознают "Arial Narrow Bold". Но IE9 и Firefox этого не делают. IE9 распознает "Arial Narrow". Firefox падает до Arial. font-stretch: condensed сообщает Firefox использовать " Arial Narrow" версия Arial, и font-weight: 700; сообщает как IE9, так и Firefox для использования в" Arial Narrow Bold " версии насколько я могу сказать. Вес шрифта 600, 700, 800 и 900 вызывает полужирный шрифт для меня.

Franklin Gothic Medium с Arial узкий смелый резерв

теперь у вас есть "уловка-22". 

font-family: "Franklin Gothic Medium", "Franklin Gothic", "Arial Narrow Bold", "Arial Narrow", "Arial", sans-serif;

если Firefox может найти "Franklin Gothic", вы в порядке, но если он не может, то он вернется к"Arial". Если вы используете font-stretch: condensed; font-weight: 700; в свою очередь, что в "Arial Narrow Bold", вы повлияете на внешний вид Франклина, когда Arial fallback не используется. Каждый браузер будет применять font-weight правило для Франклина, если Франклин доступен-не то, что вы хотите вообще. Если вы используете font-stretch: condensed и Firefox имеет доступ к Franklin, он будет послушно конденсировать его. (Я не видел этого ни в одном другом браузере.) В вашей конкретной ситуации я бы рассчитывал на то, что Firefox получит Франклина и примет, что регулярный Arial будет использоваться в качестве запасного варианта. Но добавив " Франклин готик" (для FF) и" Arial Narrow " (для IE9) собираются много помочь.

(на момент написания статьи Chrome находится в версии 21, а Firefox-в версии 14.)

27

Если вы не можете найти решение, перейдите по маршруту шрифта CSS3. http://www.w3schools.com/css/css3_fonts.asp

2