Chrome 和 Firefox 不会渲染 Avenir 的粗体字重，但 Safari 会！怎么修？答案

【问题标题】：Chrome & Firefox not rendering bold font-weights of Avenir, but Safari does! How to fix?Chrome 和 Firefox 不会渲染 Avenir 的粗体字重，但 Safari 会！怎么修？
【发布时间】：2014-08-05 18:58:21
【问题描述】：

如标题所示，我目前在 Chrome 和 Firefox 中呈现文本的方式存在问题。

Safari 目前尊重我为 Avenir Next 指定的粗体，但 Chrome 和 Firefox 都不是。

无论权重是使用“粗体/粗体”还是“700/800/900”指定的，这都是正确的。无论我是在我的 css 样式表还是内联 html 中指定字体粗细，这也是如此。

有谁知道这可能是什么原因和/或更重要的是，有一种方法可以修复文本渲染？

哦，目前，我正在通过以下 CSS 将 Avenir Next 导入我的网站：

@font-face {
    font-family: 'Avenir Next';
    font-weight: normal;
    font-style: normal;
    font-variant:normal;
    src: url('./fonts/AvenirNext-Regular/AvenirNext-Regular.eot?') format('eot'),
    url('./fonts/AvenirNext-Regular/AvenirNext-Regular.otf')  format('opentype'),
    url('./fonts/AvenirNext-Regular/AvenirNext-Regular.woff') format('woff'),
    url('./fonts/AvenirNext-Regular/AvenirNext-Regular.ttf')  format('truetype'),
    url('./fonts/AvenirNext-Regular/AvenirNext-Regular.svg#AvenirNext-Regular') format('svg');
}

非常感谢您提供的任何帮助！

【问题讨论】：

标签： css google-chrome fonts safari text-rendering

【解决方案1】：

正如其他答案所述，您需要为您希望在您的网站上提供给我们的所有字体提供 @font-face 指令。您目前拥有：

    @font-face {
    font-family: 'Avenir Next';
    font-weight: normal;
    font-style: normal;
    font-variant:normal;
    src: url('./fonts/AvenirNext-Regular/AvenirNext-Regular.eot?') format('eot'),
    url('./fonts/AvenirNext-Regular/AvenirNext-Regular.otf')  format('opentype'),
    url('./fonts/AvenirNext-Regular/AvenirNext-Regular.woff') format('woff'),
    url('./fonts/AvenirNext-Regular/AvenirNext-Regular.ttf')  format('truetype'),
    url('./fonts/AvenirNext-Regular/AvenirNext-Regular.svg#AvenirNext-Regular') format('svg');
}

因此，为了清楚起见，您需要包含所有不同的样式（常规、粗体、斜体、粗体和斜体）：

@font-face {
        font-family: 'Avenir Next';
        font-weight: normal;
        font-style: normal;
        font-variant:normal;
        src: url('./fonts/AvenirNext-Regular/AvenirNext-Regular.eot?#iefix') format('eot'),
        url('./fonts/AvenirNext-Regular/AvenirNext-Regular.otf')  format('opentype'),
        url('./fonts/AvenirNext-Regular/AvenirNext-Regular.woff') format('woff'),
        url('./fonts/AvenirNext-Regular/AvenirNext-Regular.ttf')  format('truetype'),
        url('./fonts/AvenirNext-Regular/AvenirNext-Regular.svg#AvenirNext-Regular') format('svg');
    }

@font-face {
        font-family: 'Avenir Next Bold';
        font-weight: bold;
        font-style: normal;
        font-variant:normal;
        src: url('./fonts/AvenirNext-Bold/AvenirNext-Bold.eot?#iefix') format('eot'),
        url('./fonts/AvenirNext-Bold/AvenirNext-Bold.otf')  format('opentype'),
        url('./fonts/AvenirNext-Bold/AvenirNext-Bold.woff') format('woff'),
        url('./fonts/AvenirNext-Bold/AvenirNext-Bold.ttf')  format('truetype'),
        url('./fonts/AvenirNext-Bold/AvenirNext-Bold.svg#AvenirNext-Bold') format('svg');
    }

@font-face {
        font-family: 'Avenir Next Italic';
        font-weight: normal;
        font-style: italic;
        font-variant:normal;
        src: url('./fonts/AvenirNext-Italic/AvenirNext-Italic.eot?#iefix') format('eot'),
        url('./fonts/AvenirNext-Italic/AvenirNext-Italic.otf')  format('opentype'),
        url('./fonts/AvenirNext-Italic/AvenirNext-Italic.woff') format('woff'),
        url('./fonts/AvenirNext-Italic/AvenirNext-Italic.ttf')  format('truetype'),
        url('./fonts/AvenirNext-Italic/AvenirNext-Italic.svg#AvenirNext-Italic') format('svg');
    }

@font-face {
        font-family: 'Avenir Next Bold Italic';
        font-weight: bold;
        font-style: italic;
        font-variant:normal;
        src: url('./fonts/AvenirNext-Bold-Italic/AvenirNext-Bold-Italic.eot?#iefix') format('eot'),
        url('./fonts/AvenirNext-Italic/AvenirNext-Bold-Italic.otf')  format('opentype'),
        url('./fonts/AvenirNext-Italic/AvenirNext-Bold-Italic.woff') format('woff'),
        url('./fonts/AvenirNext-Italic/AvenirNext-Bold-Italic.ttf')  format('truetype'),
        url('./fonts/AvenirNext-Italic/AvenirNext-Bold-Italic.svg#AvenirNext-Bold-Italic') format('svg');
    }

这当然是假设实际的字体名称。一旦到位，您可以按照@rubo123 的回答使用字体。我添加了#iefix 来终止查询字符串，如以下问题所述：css - How does ?#iefix solve web fonts loading in ie6-8?

【讨论】：

有趣。感谢您和所有提供帮助的人。

【解决方案2】：

您需要将粗体字体添加到您的 css 文件中，就像您对常规字体 EG 所做的那样；

@font-face {
    font-family: 'Avenir Next Bold';
    font-weight: normal;
    font-style: normal;
    font-variant:normal;
    src: url('./fonts/AvenirNext-Bold/AvenirNext-Bold.eot?') format('eot'),
    url('./fonts/AvenirNext-Bold/AvenirNext-Bold.otf')  format('opentype'),
    url('./fonts/AvenirNext-Bold/AvenirNext-Bold.woff') format('woff'),
    url('./fonts/AvenirNext-Bold/AvenirNext-Bold.ttf')  format('truetype'),
    url('./fonts/AvenirNext-Bold/AvenirNext-Bold.svg#AvenirNext-Bold') format('svg');
}

然后将此字体系列分配给所需的元素EG；

b,strong,h1,h2,h3 {
    font-family: 'Avenir Next Bold';
}

【讨论】：

不过有一个问题：有没有办法将这些字体组合起来，以免添加额外的请求来呈现页面？也许与使用 Open+Sans:400,700 等等于一个浏览器请求的 Google Fonts 请求的方式类似？另外，如果需要添加这些字体，那么 Safari 怎么会正确呈现它，而 Chrome 和 Firefox 却表现得好像它们不存在一样？ – user3570943 5 小时前
Google 实际上在该文件中也有多个字体请求 EG - fonts.googleapis.com/… 我不太确定 Safari。

【解决方案3】：

您只指定了一个常规字体。当您随后请求粗体时，浏览器可能会应用合成粗体（算法粗体、假粗体），或者它们可能会使用常规字体。

联系font vendor 获取粗体字体以及在网页上使用它的说明。

【讨论】：