粗体自定义字体不适用于 Chrome 90，仅显示常规字体粗细答案

【问题标题】：bold custom font not working on Chrome 90, only showing regular font-weight粗体自定义字体不适用于 Chrome 90，仅显示常规字体粗细
【发布时间】：2021-08-06 23:04:54
【问题描述】：

我正在使用自定义字体“Tangerine”，但它在 Chrome 上无法正确显示，即使在 Firefox 上也可以正常工作。标题应该像在 Firefox 中一样显示为粗体，但在 Chrome 中它只是显示常规字体粗细。我只需要Tangerine的粗体版。

版本：

Windows 10 上的 Chrome (90.0.4430.72)
Linux 上的 Chromium (90.0.4430.72)

CSS：

@font-face { 
    font-family: 'Tangerine';
    src:url('tangerine/TangerineBold.woff2') format('woff2'),
        url('tangerine/TangerineBold.woff') format('woff'),
        url('tangerine/TangerineBold.ttf') format('truetype');
}

h1 {font-family:'Tangerine', sans-serif}

我做了什么：

我在@font-face 中使用了font-weight:700 和font-style:normal，但没有帮助。我还尝试删除 woff2 和 woff 以检查它是否仅使用 truetype-format。

然后我使用常规字体，检查是否有差异，但 Chrome 只显示常规字体。（它怎么知道，Regular 的外观如何？）在这样做之后，Firefox 也只显示了常规字体。所以它只适用于 Firefox，如果我只提供粗体字体。

@font-face { 
    font-family: 'Tangerine';
    src:url('tangerine/TangerineReg.woff2') format('woff2'),
        url('tangerine/TangerineReg.woff') format('woff'),
        url('tangerine/TangerineReg.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
}

@font-face { 
    font-family: 'Tangerine';
    src:url('tangerine/TangerineBold.woff2') format('woff2'),
        url('tangerine/TangerineBold.woff') format('woff'),
        url('tangerine/TangerineBold.ttf') format('truetype');
    font-style: normal;
    font-weight: 700;
}

h1 {font-family:'Tangerine', sans-serif}

请帮帮我，我不知道这些字体是怎么回事。不加粗字体无法阅读。谢谢！ :)

【问题讨论】：

标签： css google-chrome fonts font-face

【解决方案1】：

解决方案是只提供常规字体粗细。现在不同的浏览器自己制作粗体。

@font-face { 
    font-family: 'Tangerine';
    src:url('tangerine/TangerineRegular.woff2') format('woff2'),
        url('tangerine/TangerineRegular.woff') format('woff'),
        url('tangerine/TangerineRegular.ttf') format('truetype');
}

另一种解决方案是提供两种字体，但不提供字体粗细属性。如果我同时使用，谷歌浏览器仍在使用他自己生成的粗体字。

这只是因为后面的字体规则覆盖了第一个规则。（就像在 CSS 中规则具有完全相同的特性时一样）

@font-face { 
    font-family: 'Tangerine';
    src:url('tangerine/TangerineBold.woff2') format('woff2'),
        url('tangerine/TangerineBold.woff') format('woff'),
        url('tangerine/TangerineBold.ttf') format('truetype');
}

@font-face { 
    font-family: 'Tangerine';
    src:url('tangerine/TangerineRegular.woff2') format('woff2'),
        url('tangerine/TangerineRegular.woff') format('woff'),
        url('tangerine/TangerineRegular.ttf') format('truetype');
}

当我尝试先使用 Regular 和 Bold 两种浏览器时，它仅适用于 Firefox，而无法用于 chrome。

@font-face { 
    font-family: 'Tangerine';
    src:url('tangerine/TangerineRegular.woff2') format('woff2'),
        url('tangerine/TangerineRegular.woff') format('woff'),
        url('tangerine/TangerineRegular.ttf') format('truetype');
}

@font-face { 
    font-family: 'Tangerine';
    src:url('tangerine/TangerineBold.woff2') format('woff2'),
        url('tangerine/TangerineBold.woff') format('woff'),
        url('tangerine/TangerineBold.ttf') format('truetype');
}

当我在我的问题中对这两种字体使用字体权重时，Google Chrome 和 Firefox 都失败了。当仅使用 font-weight: 700 用于粗体字时，也会发生这种情况。当我只使用font-weight: 400 作为常规时，它适用于两种浏览器，但它只能像案例 2 所示那样工作。

-> Google Chrome 需要 Regular-Font 来生成自己的粗体字体，而字体的粗体版本 (tangerine/TangerineBold.woff2) 因某种原因损坏并且无法使用...在 Firefox 中生成的粗体字体比真正的粗体字体小一点。

如果将来某些用户遇到同样的问题，我很乐意提供帮助。 :)

【讨论】：