Firefox无法识别字体

Question

我正在通过CSS设置pre HTML元素样式：

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

• 它们已安装在计算机中
• 它能够识别其他自定义字体

这里可能会发生什么？

Answer 1

解决方案并不简单。字体外观因浏览器，操作系统而异，当然还有客户端系统上可用的字体。如果没有根据您的目标受众进行进一步测试，请不要将此答案视为面值。

在Windows上，自Firefox 4和IE9以来，使用DirectWrite而不是GDI呈现字体。由于此更改，“Arial Narrow”和“Arial Black”等字体被视为Arial系列的一部分，而不是独立系列。因此在Firefox中，您可以通过常规Arial声明访问Arial Narrow并使用一些修饰符。 IE9以类似的方式工作，但似乎有一些实用的作弊，这使得它以开发人员习惯的方式工作。

Franklin Gothic Medium

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

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

Arial Narrow Bold

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的字体重量对我来说是个大胆的。

Franklin Gothic Medium，Arial Narrow Bold fallback

现在你有一个Catch-22。

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

如果Firefox可以找到“富兰克林哥特式”你很好，但如果它不能那么它将回归到“Arial”。如果您使用font-stretch: condensed; font-weight: 700;将其转换为“Arial Narrow Bold”，则在不使用Arial回退时会影响Franklin的外观。如果富兰克林可用，每个浏览器都会将font-weight规则应用于富兰克林 - 而不是您想要的。如果您使用font-stretch: condensed并且Firefox可以访问Franklin，它将尽职地压缩它。 （我没有在任何其他浏览器中看到它。）在您的特定情况下，我会指望Firefox获得Franklin并接受常规Arial将用作后备。但是添加“Franklin Gothic”（用于FF）和“Arial Narrow”（用于IE9）将会有很大帮助。

（在撰写本文时，Chrome版本为21，Firefox版本为14。）

Answer 2

如果找不到解决方案，请转到CSS3字体路径。 http://www.w3schools.com/css/css3_fonts.asp