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

Я стилю HTML-элемент pre через 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, хотя

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

Что здесь может быть?

Ответы

Ответ 1

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

В 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 "Arial Narrow", а font-weight: 700; сообщает обоим IE9 и Firefox, насколько я могу судить, использовать версию "Arial Narrow Bold" . Шрифты весом 600, 700, 800 и 900 вызывают у меня смелые.

Горизонтальная среда Франклина с Arial Узкий смелый резерв

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

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