Firefox无法识别字体 [英] Firefox not recognizing a font

问题描述

我通过CSS样式化 pre HTML元素，如下所示：

I'm styling the pre HTML element via CSS like this:

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

它适用于Chrome / Chromium，Opera，Safari和IE该字体确实安装在计算机中），但不是在Firefox中。 Firefox只识别 Arial 。

And it works in Chrome/Chromium, Opera, Safari and IE (meaning that the font is indeed installed in the computer), but not in Firefox. Firefox only recognizes Arial.

我尝试过其他自定义字体（如

And I've tried with other custom fonts (like Century Gothic) and it works, so it's able to recognize custom fonts.

底线，Firefox无法识别 即使

Bottom line, Firefox isn't recognizing Franklin Gothic Medium nor Arial Narrow Bold even though

<> li>

• they are installed in the computer
• it's able to recognize other custom fonts

可能会在这里？

推荐答案

解决方案并不简单。字体外观因浏览器，操作系统而异，当然客户端系统上的字体也可用。

The solution is not straightforward. Font appearance varies by browser, OS, and of course by which fonts are available on the client's system. Don't take this answer at face value without further testing based on your target audience.

在Windows上，自从Firefox 4和IE9以来，字体使用DirectWrite而不是GDI。从这个变化，像Arial Narrow和Arial Black的字体被认为是Arial家庭的一部分，而不是独立的家庭。因此，在Firefox中，您通过带有一些修饰符的常规Arial声明访问Arial Narrow。 IE9以类似的方式工作，但似乎有一些实用的骗子烘焙，使它的工作方式开发人员已经习惯了。

On Windows, ever since Firefox 4 and IE9, fonts are rendered using DirectWrite instead of GDI. Since this change, fonts like "Arial Narrow" and "Arial Black" are considered part of the Arial family and not as standalone families. So in Firefox, you access Arial Narrow through the regular Arial declaration with some modifiers. IE9 works in a similar fashion, but seems to have some pragmatic cheats baked-in that makes it work in the way developers have been used to.

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

除Firefox外的所有浏览器均了解Franklin Gothic Medium。 Firefox不会，并继续下一个选择，富兰克林哥特式，你可能甚至不认为你有，但这是富兰克林哥特式中居住在DirectWrite世界。 在没有任何其他修饰符（斜体，粗体，拉伸）的情况下，当指定Franklin Gothic时，我的Firefox会抓取Franklin Gothic Medium。

All browsers except Firefox understand "Franklin Gothic Medium". Firefox doesn't and goes on to the next choice, "Franklin Gothic", which you might not even think you have, but that is where "Franklin Gothic Medium" is living in the DirectWrite world. In the absence of any other modifiers (italic, bold, stretch), my Firefox grabs "Franklin Gothic Medium" when "Franklin Gothic" is specified.

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版本，只要我能告诉。

Some browsers, like Chrome and IE7–8 recognize "Arial Narrow Bold". But IE9 and Firefox do not. IE9 does recognize "Arial Narrow". Firefox falls down to Arial. font-stretch: condensed tells Firefox to use the "Arial Narrow" version of Arial, and font-weight: 700; tells both IE9 and Firefox to use to the "Arial Narrow Bold" version as far as I can tell. Font weights of 600, 700, 800, and 900 are triggering the bold for me.

现在你有了一个Catch-22。

Now you've got a 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，当不使用Arial后备时，将影响Franklin的外观。如果富兰克林可用，每个浏览器都会将 font-weight 规则应用于富兰克林 - 不是你想要的。如果你使用 font-stretch：condensed ，并且Firefox可以访问Franklin，它会尽职地把它压缩。 （我没有看到在任何其他浏览器。）在你的特殊情况下，我会指望Firefox获得富兰克林，并接受常规Arial将用作后备。但是，添加富兰克林哥特式（对于FF）和Arial Narrow（对于IE9）会有很大帮助。

If Firefox can find "Franklin Gothic" you are fine, but if it can't then it will fall back to "Arial". If you use font-stretch: condensed; font-weight: 700; to turn that into "Arial Narrow Bold", you will affect the appearance of Franklin when the Arial fallback is not used. Every browser will apply the font-weight rule to Franklin if Franklin is available—not what you want at all. If you use font-stretch: condensed and Firefox has access to Franklin, it will dutifully condense it. (I didn't see that in any other browser.) In your particular situation, I would count on Firefox getting Franklin and accept that regular Arial will be used as the fallback. But adding "Franklin Gothic" (for FF) and "Arial Narrow" (for IE9) is going to help a lot.

在版本21和Firefox是在版本14。）

(At the time of writing, Chrome is at version 21 and Firefox is at version 14.)

这篇关于Firefox无法识别字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！