如何在@font-face 中指定本地字体的粗体变体作为后备？答案

【问题标题】：How to specify a bold variant of a local font as a fallback in @font-face?如何在@font-face 中指定本地字体的粗体变体作为后备？
【发布时间】：2019-06-18 15:47:33
【问题描述】：

我想将 Arial Bold 指定为 @font-face 规则中的后备字体。
像这样：

@font-face {font-family: myCustomFont; src: url(http://unreachableHost/font1b.ttf), local(Arial Bold)}

但它不起作用。至少在 Chrome 中没有。后备不是 Arial Bold 甚至不是 Arial Regular。

这是一个包含多个字体系列的示例。

@font-face {font-family: mustBeArialBold; src: url(http://unreachableHost/font1b.ttf), local(Arial Bold)}

@font-face {font-family: mustBeVerdanaBold; src: url(http://unreachableHost/font2b.ttf), local(Verdana Bold)}

@font-face {font-family: mustBeSegoeBold; src: url(http://unreachableHost/font3b.ttf), local(Segoe UI Bold)}

@font-face {font-family: mustBeTimesBold; src: url(http://unreachableHost/font4b.ttf), local(Times New Roman Bold)}

<body style="text-align: right">

<b style="font-family: Arial">This is Arial Bold</b> <br>
<c style="font-family: mustBeArialBold">This should be Arial Bold</c> <br><br>

<b style="font-family: Verdana">This is Verdana Bold</b> <br>
<c style="font-family: mustBeVerdanaBold">This should be Verdana Bold</c> <br><br>

<b style="font-family: Segoe UI">This is Segoe UI Bold</b> <br>
<c style="font-family: mustBeSegoeBold">This should be Segoe UI Bold</c> <br><br>

<b style="font-family: Times New Roman">This is Times New Roman Bold</b> <br>
<c style="font-family: mustBeTimesBold">This should be Times New Roman Bold</c> <br><br>

可以这样做吗？怎么样？

跟进：

这是@Kerri 建议的解决方案

@font-face {font-family: mustBeArial; src: local(Arial)}

@font-face {font-family: mustBeVerdana; src: local(Verdana)}

@font-face {font-family: mustBeSegoe; src:  local(Segoe UI)}

@font-face {font-family: mustBeTimes; src: local(Times New Roman)}

<body style="text-align: right">

<b style="font-family: Arial">This is Arial Bold</b> <br>
<b style="font-family: mustBeArial">This should be Arial Bold</b> <br><br>

<b style="font-family: Verdana">This is Verdana Bold</b> <br>
<b style="font-family: mustBeVerdana">This should be Verdana Bold</b> <br><br>

<b style="font-family: Segoe UI">This is Segoe UI Bold</b> <br>
<b style="font-family: mustBeSegoe">This should be Segoe UI Bold</b> <br><br>

<b style="font-family: Times New Roman">This is Times New Roman Bold</b> <br>
<b style="font-family: mustBeTimes">This should be Times New Roman Bold</b> <br><br>

生成的文本看起来像粗体文本，但与真正的粗体字体完全不同。

【问题讨论】：

您可以尝试在您的@font-face 规则中包含font-weight: bold 属性。请参阅MDN's documentation，尽管我相信这也会使您的非后备字体变粗。

标签： css fonts font-face fallback

【解决方案1】：

我的计算机上没有名为“Arial Bold”的字体（不过我有“Arial Black”），所以local() 函数不会找到合适的字体来使用。正如预期的那样，显示默认为 Times New Roman。

但是，我确实有 Arial，因此任何对普通旧“Arial”的调用都会按预期工作。

在您的代码中，

<b style="font-family: Arial">This is Arial Bold</b>

调用名为 Arial 的字体（我已经有了），并且由于您已将其包装在 b 标记中，因此它显示为粗体。到目前为止一切顺利。

但是本地没有“Arial Bold”这样的字体。

<c style="font-family: mustBeArialBold">This should be Arial Bold</c>

找不到名为“Arial Bold”的字体（因为我的计算机上不存在该字体），并且由于它位于 c 元素（那是什么？）而不是 b 元素中，所以它是不会显示为粗体。如果您将 c 元素更改为 b 元素，您的文本将显示为粗体。

虽然您可以尝试为 @font-face 声明添加样式，但我倾向于避免以这种方式进行字体样式设置，而是将样式应用于类。（字体与字体样式不同，除非字体开发人员有意将样式内置到字体中。）这里有一些关于它如何工作的很好的指导。 https://www.smashingmagazine.com/2013/02/setting-weights-and-styles-at-font-face-declaration/

【讨论】：

它也不起作用。生成的文本是某种基于常规字体的伪造粗体字体。它看起来一点也不像真正的粗体字体。请参阅问题中的后续内容。
有粗体，然后有粗体，根据各种浏览器...stackoverflow.com/questions/8942625/…
问题是如何使用给定字体系列的粗体变体。如果您转到 Fonts 系统文件夹，您会找到 Arial 字体文件、Arial Bold 字体文件、Arial Italic 字体文件，等等对于该字体系列的每个变体。