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

Question

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

3

我想在@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>

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

- Mercalli

你可以尝试在@font-face规则中包含font-weight: bold属性。请参阅MDN文档，但我认为这也会使你的非回退字体变粗。 - Heretic Monkey

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kerri · 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”的字体（因为它在我的电脑上不存在），而且由于它在代码元素中（这是什么？），而不是粗体元素中，所以它不会显示为粗体。如果你将代码元素更改为粗体元素，则文本将显示为粗体。

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