参考粗体版本而不使用字体粗细：粗体？

Question

我在网站上使用网络字体。对于某些标题（h1、h2 等），我使用粗体变体（并将font-weight 设置为正常），因为它们看起来比使用常规变体并使用默认粗体保留 h 标签要好得多重量。必须指定font-weight: normal，否则“粗体为粗体”，看起来很糟糕。

我遇到的问题是，如何将标准网络字体指定为备用字体并“恢复”粗体设置？

例如，我可能会这样做：

@font-face {
    font-family: "My bold webfont";
    src: url("url/of/webfont/bold/variant");
}

h1 {
    font-family: "My bold webfont", Arial, sans-serif;
    font-weight: normal; 
}

只要 webfont 存在，我们就没有问题，但如果 webfont 失败，我们最终会得到非粗体 Arial。

有没有办法在h1 的font-family 中指定“Arial Bold”（我知道这不起作用，但这是理想的目标）？或者也许在@font-face 定义中我可以说“这仅适用于它所分配的任何东西的粗体版本”——所以我可以从h1 样式中省略font-weight: normal？

Answer 1

尝试在两个地方都指定font-weight: bold：

@font-face {
    font-family: "My bold webfont";
    src: url("url/of/webfont/bold/variant");
    font-weight: bold;
}

h1 {
    font-family: "My bold webfont", Arial, sans-serif;
    font-weight: bold;
}

Here's a demo. p#one 展示了这种技术的使用；如果您在不支持 WOFF 网络字体的浏览器中查看它，您会看到默认字体为粗体。