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

Question

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

14

我在我的网站上使用自定义字体时遇到了问题。

因此，我使用以下CSS来设置文本样式。

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

由于我的网站是用我的母语建立的，我不得不使用UTF-8符号，但这些符号似乎没有包含在Open Sans字体中，所以它们被显示为Helvetica字体，但问题是它们比较粗重。

如果使用回退字体，是否有可能将字体重量参数设置为正常？

- user1587985

这个主题之前已经在这里探讨过：https://dev59.com/FHI-5IYBdhLWcg3wO1rl#1961519。似乎没有直接的方法来确定当前字体。有一些插件可以使用（由@SW4在下面的回复中提到），但它们似乎有点过度。 - AnchovyLegend

@AnchovyLegend 我完全同意 - SW4

3个回答

0

我认为MichaelM的解决方案行不通。你可以做的是使用在各种在线字体信息网站上可以找到的“Postcript名称”来指定字体文件。

font-family: "Open Sans",Helvetica-Light;

不幸的是，指定 font-weight: 600 可能会导致未定义的行为。一些浏览器可能会尝试使其更加粗体，而另一些则可能保持原样。

- John Bachir

0

很遗憾，使用CSS无法定义特定的回退字体样式。

因此，您可能需要尝试找出正在使用的字体，然后根据结果应用样式，请参见此处的一种方法，该方法可以计算将字体应用于元素后产生的宽度，然后“最佳猜测”它是哪个字体。

话虽如此，这本质上是一个hack/解决方法。

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

- SW4

链接已经损坏。 - paroxyzm

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

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

- MichaelM · Accepted Answer

您可以为每种字体定义一个新的@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'; 这个样式，应该可以获得预期的效果。