Firefox无法识别字体

Question

我正在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即便如此

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

这可能会发生什么？

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不会继续下一个选择,"富兰克林哥特式",你甚至可能认为没有,但这就是"富兰克林哥特式媒体"生活在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的字体重量对我来说是个大胆的.

富兰克林哥特式媒体与Arial窄大胆的后备

现在你有一个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).