2

我在网站上使用 webfonts。对于某些标题（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。

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

4

1 回答 1

3

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

这是一个演示。 p#one展示了这种技术的使用；如果您在不支持 WOFF webfonts 的浏览器中查看它，您会看到默认字体为粗体。

于 2012-08-28T21:52:07.920 回答