Css Firefox无法识别字体

我正在通过CSS设置

pre

HTML元素的样式，如下所示：

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

它可以在Chrome/Chrome、Opera、Safari和IE中使用（这意味着该字体确实安装在计算机中），但不能在Firefox中使用。Firefox只识别

Arial

我还尝试过其他定制字体（比如世纪哥特式字体），它可以工作，所以它能够识别定制字体

归根结底，Firefox并没有识别出

Franklin哥特式中字体

和

Arial狭义粗体

，尽管如此

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

---

这里可能发生了什么？

如果找不到解决方案，请按CSS3字体路线进行

解决方案并不简单。字体外观因浏览器、操作系统以及客户端系统上可用的字体而异。在没有基于目标受众的进一步测试之前，不要从表面上看这个答案

在Windows上，自从Firefox4和IE9以来，字体都是使用DirectWrite而不是GDI呈现的。由于这一变化，“Arial窄体”和“Arial黑色”等字体被视为Arial系列的一部分，而不是独立系列。因此，在Firefox中，您可以通过带有一些修饰符的常规Arial声明来访问Arial狭窄。IE9也以类似的方式工作，但似乎有一些实用的骗局，使得它以开发人员习惯的方式工作

富兰克林哥特式媒介

字体系列：“富兰克林哥特式中字体”，“富兰克林哥特式”，无衬线；

除Firefox外，所有浏览器都理解“多媒体”。Firefox没有，并且继续下一个选择，“富兰克林哥特式”，你可能甚至认为你没有，但这就是“富兰克林哥特式媒体”在DirectWrite世界中的位置。在没有任何其他修饰符（斜体、粗体、拉伸）的情况下，当指定“富兰克林哥特式”时，我的Firefox会使用“富兰克林哥特式媒介”

Arial狭义粗体

字体系列：“Arial窄加粗”、“Arial窄”、“Arial”、无衬线；
字体拉伸：压缩；
字号：700；

一些浏览器，如Chrome和IE7-8，可以识别“Arial窄带粗体”。但IE9和Firefox没有。IE9确实承认“Arial狭窄”。Firefox只能使用Arial

font stretch:condensed

告诉Firefox使用“Arial狭窄”版本的Arial，并且

font weight:700

告诉IE9和Firefox尽可能使用“Arial窄带粗体”版本。字体权重为600、700、800和900时，我会触发粗体字

富兰克林哥特式中音，带Arial狭长粗体回退 现在你有了第二十二条军规

字体系列：“富兰克林哥特式中字体”、“富兰克林哥特式”、“Arial狭义粗体”、“Arial狭义”、“Arial”、无衬线；

如果Firefox能找到“富兰克林哥特式”，你就可以了，但如果找不到，它就会退回到“Arial”。如果使用

字体拉伸：压缩；字号：700

若要将其转换为“Arial窄带粗体”，则在未使用Arial回退时，将影响Franklin的外观。如果Franklin根本不是您想要的，那么每个浏览器都会对Franklin应用

font-weight

规则。如果您使用

font-stretch:condensed

，并且Firefox可以访问Franklin，它会尽职尽责地对其进行压缩。（我在任何其他浏览器中都没有看到。）在您的特定情况下，我会指望Firefox获得Franklin，并接受常规Arial将用作备用。但添加“富兰克林哥特式”（FF）和“Arial窄带”（IE9）会有很大帮助

---

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

mozilla的问题是：非常感谢您的回答@David。我很高兴我不用花整个周日（父亲节）来解决这个问题。字体拉伸：Condent为我做了这件事，并选择了字体的窄变型，即BC 39 3/1窄变型不是由FF渲染的，而IE和Chrome则没有任何问题。