如何在后备字体的字体定义中添加字体粗细属性？答案

【问题标题】：How to add font-weight property inside a font definition for the fallback font?如何在后备字体的字体定义中添加字体粗细属性？
【发布时间】：2017-04-30 02:03:36
【问题描述】：

在我们的项目中，我们使用 Fira Sans Bold 来加粗文本段。作为后备，我们希望使用 Lucida Sans Unicode 并将 font-weight 设置为 bold。

但是，我们遇到了一个问题，我们需要为 Lucida Sans Unicode 预先设置 font-weight 属性。

有哪些可能的方法来做到这一点？

我们尝试了@font-face。

@font-face {
  font-family: 'Lucida Bold';
  font-weight: bold;
  src: local('Lucida Sans Unicode');
}

但是，问题是，在使用 Fira Sans Bold 时，我们只依赖于 font-family 而没有使用任何其他加粗字体的方法，例如 font-weight:bold， strong、b 等。这对于@font-face 来说是不够的（我在这里提出了问题：What can be the reason for @font-face failing to work?）

如果有任何想法，将不胜感激。

【问题讨论】：

如果字体“Fira Sans Bold”本身实际上不是粗体，那么这个名字就不是一个很好的名字。使用这样的名称，无论您是否使用 font-weight:bold，我都希望显示是相同的。
无论如何，更一般地说，答案是否定的。您不能拥有与主字体不同的其他子样式的后备字体。没有 font: [[medium 'Arial Black']], [[bold 'Arial']] 这样的东西。
与your other question 相同的问题：Lucida Sans Unicode 是一个字体系列。 Lucida Sans Unicode Bold，一个字体，可能是你需要的。声明 font-weight 将不会合成一个面或从该字体系列中选择。

标签： css font-face

【解决方案1】：

声明字体粗细/字体样式等只会影响哪些文本“匹配”@font-face 规则。

由于字体要么是粗体，要么不是，声明font-weight:bold 不会强制它变为粗体。只要您的 text 应该是粗体，它就会显示出来。

当你的文本的font-weight 是normal 时，大概使用Fira Sans Bold 的文本是粗体的。这意味着只要 font-weight normal，您将希望 Lucida 的粗体匹配，如下所示：

@font-face {
  font-family: 'MyLucidaFont';
  font-weight: normal;
  src: local('Lucida Sans Unicode Bold');
}

“每当我的文本是 font-weight:normal 并使用 font-family:"MyLucidaFont" 时，就会应用此字体”

然后：

font-family:"Fira Sans Bold","MyLucidaFont"

这是假设您无法更改 Fira Sans Bold 定义。如果可以，那么最好更改它，以确保它适用于您的文本 text-weight 是 bold：

/* We don't need to declare Lucida at all if we change this one */
@font-face {
  font-family: 'Fira Sans';
  font-weight: bold; /* That's more like it! */
  src: url('/FiraSansBold.woff');
}

只要您的文本有font-weight:bold 和font-family:"Fira Sans","Lucida Sans Unicode"，它就会以后备的形式加粗。

请记住，“Lucida Sans Unicode”是一个字体系列；一组字体。

【讨论】：

【解决方案2】：

我觉得很简单

.supposedly-bolded-text {
  font-family: 'Fira Sans Bold', 'Lucida Bold';
  font-weight: bold;
}

会为您解决问题。

【讨论】：