CSS 字体在 Chrome 中显示正常，但在 FF 或 IE 中显示不正常

Question

我创建了一个登录页面，需要一个标题为 Avenir 字体。我让它在 Chrome 中正确呈现，但它不适用于任何其他浏览器。有什么我遗漏的吗？

CSS

    h1,h2,h3,h4,h5, .section h2 {
        margin:0;
        padding:0;
        color:#c41230;
        font-family: AvenirLT-Black;
        font-weight:normal;
    }

HTML

<div class="ten columns title">
          <h1 style="font:AvenirLT-Black">Additional Information</h1>
        </div>

Answer 1

font-family 值被传递到 OS 字体子系统。

Windows 有两个不同的字体子系统：DirectWrite 和 GDI。 Chrome 使用较旧的 GDI； Firefox 和 IE 使用 DirectWrite。

GDI 无法为每个系列表示超过两种不同的字体粗细，因此超粗体或超轻字体会映射到不同的系列名称，通常以“Black”或“Light”为后缀或“超光”。另一方面，DirectWrite 可以表示每个系列的多个权重。因此，DirectWrite 很有可能将您的字体视为具有家族名称“AvenirLT”和超粗字体粗细的字体。所以你想做这样的事情：

font-family: AvenirLT, AvenirLT-Black;
font-weight: 900;