CSS：根据回退字体设置字体粗细

Question

我正在尝试根据所选字体设置元素的字重。例如，我可能会尝试像这样做：

h1 {
    font-family: Arial Narrow, Impact, sans-serif;
    font-weight: ?;
}

假设我希望在用户的系统中安装了Arial Narrow字体时，字体加粗显示；如果浏览器使用的是Impact字体，则字体正常显示；而如果用户的系统都没有这些字体，则字体再次加粗显示。这种情况是否可能？如果可以，我该如何实现？

- Elias Zamaria

Answer 1

我99.99999%确定这不能在没有严重的JavaScript魔法的情况下完成，即使使用JavaScript也很难找出最终使用了哪种字体。

相关：由我提出的获取JavaScript计算字体系列

- Pekka

---

嘿！我本来就要说那个！+1 - Diodeus - James MacFarlane

我同意Pekka的观点，我以前从未见过这种情况。另请参阅https://dev59.com/iUfSa4cB1Zd3GeqPAtkZ - Christopher Altman

Answer 2

这个会不会行？未经测试。

<style>
@font-face {
    font-family: "ArialBold";
    src: local("Arial Narrow");
    font-weight: bold;
}
@font-face {
    font-family: "ImpactNormal";
    src: local("Impact");
    font-weight: normal;
}
@font-face {
    font-family: "SansSerifBold";
    src: local("sans-serif");
    font-weight: bold;
}
h1 {
    font-family: ArialBold, ImpactNormal, SansSerifBold;
}
</style>

- CAnicaTA