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 文件中没有“粗体”的定义。

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

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

因此,回退到 helvetica 有效,文本不是粗体,因为font-weight:normal已设置。

现在,问题来了:

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

我应该怎么办?

4

1 回答 1

2

您是否尝试过以下方法:如何为同一种字体添加多个字体文件??

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

于 2012-11-19T11:13:12.297 回答