我pre通过 CSS 设置 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即使
这里可能发生了什么？
解决方案并不简单。字体外观因浏览器、操作系统以及客户端系统上可用的字体而异。在没有根据您的目标受众进行进一步测试的情况下，不要从表面上看这个答案。
在 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”，您可能甚至认为自己没有，但这就是“Franklin Gothic Medium”在 DirectWrite 世界中的存在。在没有任何其他修饰符（斜体、粗体、拉伸）的情况下，当指定“Franklin Gothic”时，我的 Firefox 会抓取“Franklin Gothic Medium”。
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 的字体粗细对我来说触发了粗体。
现在你有一个 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 后备时影响富兰克林的外观。如果富兰克林可用，每个浏览器都会将font-weight规则应用于富兰克林——这根本不是你想要的。如果您使用font-stretch: condensed并且 Firefox 可以访问 Franklin，它会尽职尽责地压缩它。（我在任何其他浏览器中都没有看到。）在您的特定情况下，我会指望 Firefox 获得 Franklin 并接受将常规 Arial 用作后备。但是添加“Franklin Gothic”（对于 FF）和“Arial Narrow”（对于 IE9）会有很大帮助。
（在撰写本文时，Chrome 版本为 21，Firefox 版本为 14。）
如果找不到解决方案，请走 CSS3 字体路线。http://www.w3schools.com/css/css3_fonts.asp