我正在使用自己嵌入的自定义字体,如下所示:
@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 文件的旧浏览器将无法打印粗体文本。
我应该怎么办?