css - 不使用字体粗细的引用粗体版本 : bold?

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; 
}

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

有没有办法在 h1 的 font-family 中指定“Arial Bold”(我知道这行不通，但这是理想的目标) ？或者也许在 @font-face 定义中我可以说“这只适用于它分配给的任何粗体版本”——所以我可以省略 font-weight: normal 来自 h1 风格？

Answer 1

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

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

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

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