Question

我在网站上使用Bold，Medium和Normal字体权重，分别是700，500和400。

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

如果浏览器使用font-weight: 500，我希望我以前定义为font-weight: 600的元素有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-face声明中真正定义权重。相反，font-weight在那里as a gatekeeper to match the font使用，而不是将样式传递给元素。

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

对于只有这两种字体的简化示例，您可以像这样设置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';
    });
}

如果你真的需要通过它，你无疑会找到一个更优雅的解决方案。

不同字体的字体重量不同

1 个答案: