css - 不同字体的不同字体粗细

Question

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

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

如果浏览器使用 Open Sans。有可能吗？

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

我需要类似的东西

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

虽然不知道该怎么做。

Answer 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';
    });
}

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