Firefox 26-31 中的字体答案

【问题标题】：font faces in firefox 26-31Firefox 26-31 中的字体
【发布时间】：2014-10-27 15:18:44
【问题描述】：

看起来 Firefox 无法理解我想从他那里得到什么。 Chrome 非常了解我。但是当我将 (font-face:normal) 写入属性时，Firefox 拒绝理解想要“正常”字体。它使我的块“ligter”就像父块中的字体一样。为什么！？！？！？

@font-face{
    font-family:Myriad;
    src:url('../fonts/MyriadPro-R.ttf');
    font-weight:normal;
    font-style:normal;
}
@font-face{
    font-family:Myriad;
    src:url('../fonts/MyriadPro-B.ttf');
    font-weight:bold;
     font-style:normal;
}
@font-face{
    font-family:Myriad;
    src:url('../fonts/MyriadPro-L.ttf');
    font-weight:lighter;
     font-style:normal;
}

【问题讨论】：

为什么不使用免费的网络字体？加载许可 Myriad Pro 字体看起来不正确。根据 CSS 规范，normal = 400。加载的字体是否有字体粗细 400 ？此外，在font-family 中仅使用一种字体是一种非常糟糕的做法（不提供回退）；添加至少 1 种后备字体，尤其是您使用自定义字体。

标签： html css firefox fonts

【解决方案1】：

最好使用字体的数字权重，即 font-weight:200 等，因为每个浏览器呈现字体的方式不同，因此与 600/400 等相比，加载粗体/浅色时您会看到更大的差异。

找出每种字体支持的权重并使用数值。

更改字体系列名称以表示不同的字体粗细，例如 Myriad Light、Myriad Bold、Myriad，以提高 CSS 的可读性并减少混淆。

【讨论】：

【解决方案2】：

lighter 的值对于 font-weight property inside a @font-face rule 无效（正如 W3C CSS 验证器会告诉您的那样）。请改用数字权重。正确的值应在字体供应商提供的信息中找到。

【讨论】：