CSS：如何为粗体字设置备用字体族？

Question

3

我正在使用自定义字体，并通过以下方式进行嵌入：

@font-face{font-family:myFont;src:url(css/fonts/myFont.woff);}
@font-face{font-family:myBoldFont;src:url(css/fonts/myBoldFont.woff);}

所以，每当我想使用粗体字时，我会这样做：

<style>
.bold{
    font-family:"myBoldFont";
}
</style>
<div class="bold">Hello world</div>

此外，我需要覆盖所有默认使用粗体字的 CSS 定义：

<style>
    strong,h1,h2,h3,h4,h5,h6,h7,h8{
        font-family:"myBoldFont";
        font-weight:normal;
    }
</style>

正如您所看到的，我必须设置font-weight:normal，因为如果我设置font-weight:bold，浏览器将无法找到正确的字体并进行回退，因为在这个.woff文件中没有“bold”的定义。

因此，对于支持@font-face和.woff文件的浏览器，这很有效。对于不支持它们的浏览器，例如旧版iOS设备，我需要设置一个回退，如下所示：

font-family:"myBoldFont",helvetica,arial,sans-serif;

所以，回退到Helvetica可以工作，但是由于设置了font-weight:normal，因此文本不会加粗。

现在，问题来了:

我该怎么办呢？

- Timo Ernst

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kami · Accepted Answer

@font-face属性允许您指定应用字体的样式。