不同字体的不同字体粗细答案

【问题标题】：Different font weight for different fonts不同字体的不同字体粗细
【发布时间】：2018-06-26 17:43:44
【问题描述】：

我在我的网站上使用Bold、Medium 和Normal 字体粗细，分别是700、500 和400。

我使用Helvetica Neue 字体，作为没有安装它的系统的后备，我想使用Open Sans。问题是Open Sans 没有Medium 样式。

如果浏览器使用Open Sans，我希望我以前定义为font-weight: 500 的元素具有font-weight: 600。有没有可能？

Stack Overflow 上有一个类似的问题：How to set different font-weight for fallback font?，但我无法使用已接受答案中描述的技术获得所需的结果。

我需要类似的东西

@font-face {
  font-family: 'semibold';
  src: 'Helvetica Neue':500, 'Open Sans':600;      
}

不知道怎么做。

【问题讨论】：

标签： css fonts

【解决方案1】：

您无法在字体声明中真正定义粗细。相反，font-weight 用于 as a gatekeeper to match the font，而不是将样式传递给元素。

这似乎有点矫枉过正，但您可以使用此JavaScript function by Sam Clarke 作为起点来查看字体是否可用，然后按照最适合您的特定要求的逻辑有条件地修改字体粗细。

对于只有这两种字体的简化示例，您可以像这样设置 CSS：

@font-face {
  font-family: h-semibold;
  src: local('Helvetica Neue');
}

@font-face {
  font-family: os-semibold;
  src: local('Open Sans');
}

.semibold {
  font-family: h-semibold, os-semibold;
}

.w5 {
  font-weight: 500;
}

.w6 {
  font-weight: 600;
}

然后，使用上面链接的函数，您可以在 JS 中添加类似这样的内容，以根据字体支持有条件地加载权重类：

var semibold = document.querySelectorAll('.semibold');

if (isFontAvailable('h-semibold')) {
    semibold.forEach(result => {
      result.className += ' ' + 'w5';
    });
} else {
    semibold.forEach(result => {
      result.className += ' ' + 'w6';
    });
}

如果你真的需要执行它，你无疑会想出一个更优雅的解决方案。

【讨论】：

但是没有JS代码有什么办法吗？我认为它在 SPA 中不能很好地工作，因为页面的某些部分可以动态添加并且仍然有不正确的 css 类。