Question

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

但是，我们遇到了一个问题，我们需要为 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，强，b等。这对@ font-face来说是不够的（我在这里提出了一个问题：What can be the reason for @font-face failing to work?）

对任何想法都会感激不尽。

Answer 1

声明字体粗细/字体样式等只影响哪些文字匹配＆＃39; @ font-face规则。

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

当您的文字Fira Sans Bold为font-weight时，大概使用normal的文字会以粗体显示。这意味着只要font-weight 正常，您就会希望Lucida的大胆面孔能够匹配，如下所示：

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

＆＃34;每当我的文字为font-weight:normal并使用font-family:"MyLucidaFont"时，就会应用此字体＆＃34;

然后：

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"时，它就会以后备加粗。

请记住＆＃34; Lucida Sans Unicode＆＃34;是一个字体系列;一组字体面。

Answer 2

我认为简单

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

会为你做到这一点。

如何在回退字体的字体定义中添加font-weight属性？

2 个答案: