css - 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 以类似的方式工作，但似乎内置了一些实用的技巧，使其以开发人员习惯的方式工作。

富兰克林哥特式媒介

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

除 Firefox 之外的所有浏览器都理解“Franklin Gothic Medium”。 Firefox 没有，而是继续下一个选择，“Franklin Gothic”，您甚至可能认为自己没有，但这就是 DirectWrite 世界中“Franklin Gothic Medium”的所在。 在没有任何其他修饰符(斜体、粗体、拉伸(stretch))的情况下，当指定“Franklin Gothic”时，我的 Firefox 会抓取“Franklin Gothic Medium”。

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窄粗体”版本据我所知。 600、700、800 和 900 的字体粗细触发了我的粗体。

带有 Arial Narrow Bold 回退的 Franklin Gothic Medium

现在您已经有了第 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 的外观。如果 Franklin 可用，每个浏览器都会将 font-weight 规则应用于 Franklin——这根本不是你想要的。如果您使用 font-stretch: condensed 并且 Firefox 可以访问 Franklin，它会尽职尽责地压缩它。 (我没有在任何其他浏览器中看到它。)在您的特定情况下，我会指望 Firefox 获得 Franklin 并接受常规 Arial 将用作后备。但是添加“Franklin Gothic”(对于 FF)和“Arial Narrow”(对于 IE9)会有很大帮助。

(在撰写本文时，Chrome 的版本为 21，Firefox 的版本为 14。)