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; 

因此，退回到黑體作品，但文字是不夠大膽，因爲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屬性允許您指定應用字體的樣式。