【问题标题】:CSS Font displaying fine in Chrome but not FF or IECSS 字体在 Chrome 中显示正常,但在 FF 或 IE 中显示不正常
【发布时间】:2014-06-24 20:58:56
【问题描述】:

我创建了一个登录页面,需要一个标题为 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>

【问题讨论】:

    标签: google-chrome firefox fonts


    【解决方案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;
    

    【讨论】:

    • 我确定我遗漏了其他影响这一点的 css 部分。感谢您的帮助,以下是该页面的链接。这不是我的代码,我只是想帮助一个朋友。灰色栏中的 h3 文本似乎工作正常,所以我不确定问题是什么:content.czarnowski.com/acton/fs/blocks/showLandingPage/a/5795/p/…
    • @Fathon 您是否尝试将样式更改为我建议的样式?
    • 您没有更改font-weight 的值,对吧?这部分有点重要。
    • 我现在已经做到了。我可以让它在不同的时间在不同的浏览器中工作,但不能一次全部工作。几个地方都有css字体代码,我不确定问题是什么。这里有几个:h1 { font-size:45px; line-height:48px; margin-bottom:20px; font-family: AvenirLT, AvenirLT-Black; font-weight: 900;.pagetitle h1, .homecaption h2, #logo h1 a, #logo h2 a { font-family: AvenirLT, AvenirLT-Black; font-weight: 900; letter-spacing: -.02em; text-transform:none;}
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2011-09-21
    • 1970-01-01
    • 2015-03-18
    • 2023-04-11
    • 2012-09-14
    • 2013-07-13
    • 2011-12-10
    相关资源
    最近更新 更多