如何为后备字体设置不同的字体粗细？答案

【问题标题】：How to set different font-weight for fallback font?如何为后备字体设置不同的字体粗细？
【发布时间】：2014-04-04 20:02:30
【问题描述】：

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

所以我使用以下 CSS 作为文本。

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

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

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

【问题讨论】：

该主题之前已在此处探讨过：stackoverflow.com/questions/1960817/…。似乎没有直接的方法来确定当前字体。您可以使用一些插件（@SW4 在下面的回复中提到），但它似乎有点矫枉过正。
@AnchovyLegend 我完全同意

标签： css fonts

【解决方案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';，它应该会得到想要的结果。

【讨论】：

有没有人让它在电子邮件客户端中工作，例如 Outlook (2016)？根据我的测试，它似乎不起作用。
@DaveElton 尝试使用这个解决方案，看看它是否有效stackoverflow.com/a/32056054/3338349
这不起作用，@font-face 中的 font-weight 没有指定如何本地字体应该被渲染，而是 when 此字体应根据元素上的字体粗细值呈现。

【解决方案2】：

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

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

也就是说，它本质上是一种破解/解决方法。

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

【讨论】：