我在网站上使用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;
}
虽然不知道如何去做。
最佳答案
您实际上不能在字体声明中定义粗细。相反,在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';
});
}
如果您确实需要坚持下去,那么您无疑会制定出一个更优雅的解决方案。