Question

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

@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>

生成的文本看起来有点像粗体文本，但是却不像真正的粗体字体。

Answer 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元素中（那是什么？）而不是{{1} }元素，它不会显示为粗体。如果您将b元素更改为c元素，则文本将显示为粗体。

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

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

1 个答案: