如何为后备字体设置不同的字体权重？

Question

我遇到了我用于网站的自定义字体问题。

所以我使用以下CSS来处理文本。

font-family: "Open Sans",Helvetica,Arial;
font-weight:600;

由于网站是用我的母语构建的，我必须使用UTF-8符号，这些符号似乎不包含在Open Sans中，因此它们会在Helvetica中显示，但问题是它们有更多重量。

如果正在使用后备字体，是否有任何可能的解决方案将font-weight参数设置为normal？

Answer 1

您可以为所需的每种字体定义新的@font-face。

@font-face {
      font-family: 'mainFont';
      src: url(/*Link to Open Sans*/);
      font-weight: 600;
}

@font-face {
      font-family: 'secondaryFont';
      src: local('Helvetica');
      font-weight: 400;
}

@font-face {
      font-family: 'tertiaryFont';
      src: local('Arial');
      font-weight: 600;
}

然后你最终得到的font-family: 'mainFont', 'secondaryFont', 'tertiaryFont';会得到理想的结果。

Answer 2

不幸的是，单独使用CSS无法定义回退字体特定样式。

因此你可能想要尝试计算出正在使用的字体，然后应用一个样式see here for one method，它可以解决在“最佳猜测”之前将字体应用于元素所产生的宽度。它是。

那就是说，它本质上是一种黑客攻击/解决方法。

否则，你可以考虑实现一个方法来识别符号的位置，然后将它们包装在样式span标签中，再次这将是一个相当肮脏的黑客，而不是一个干净的解决方案。