我在网站上使用BoldMediumNormal字体粗细,分别是700500400

我使用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;
}


虽然不知道如何去做。

最佳答案

您实际上不能在字体声明中定义粗细。相反,在as a gatekeeper to match the font中使用font-weight而不是将样式传递给元素。

似乎有些矫kill过正,但是您可以使用此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';
    });
}


如果您确实需要坚持下去,那么您无疑会制定出一个更优雅的解决方案。

10-05 20:26
查看更多