CSS：如何设置粗体字体系列的后备？

Question

我正在使用我自己定制的自定义字体：

@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文件。

因此，对于支持@font-face和.woff文件的浏览器，这非常有效。对于没有的浏览器，例如较旧的iOS设备，我需要像这样设置一个后备：

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

因此，helvetica的后退工作，但文本不是粗体，因为设置了font-weight:normal。

现在，问题在于：

• 如果我设置font-weight:bold，那么可以处理woff文件的浏览器 将回退到默认字体而不是使用我定义的字体 通过woff文件。
• 如果我设置font-weight:normal，则设置无法处理的旧浏览器 woff文件将无法以粗体显示文本。

我该怎么办？

Answer 1

您是否尝试过以下操作：How to add multiple font files for the same font?？

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