如何結合@ font-face和@media聲明？

Question

我想用少量的選擇器構建一個通用的排版樣式表。因此，我更願意爲各種版本使用@media部分，而不是創建不同的文件，每個文件只有幾行內容。

我還想添加一些@font-face聲明，但我不希望強制移動用戶下載有限帶寬的字體。

我可以將@font-face聲明放在@media區塊內還是必須都是頂層？如果是後者，我如何告訴移動瀏覽器他們不需要費心去下載字體？

Answer 1

CSS2 spec暗示着這樣的事情。

1. 把你@font-face聲明在一個單獨的CSS文件，如fancyfonts.css。

2. 負載fancyfonts.css在主CSS文件，但媒體目標聲明：

   @import url("fancyfonts.css") screen; 
   

3. 指定在font-family屬性你看中的字體。

   body { 
       font-family: 'My Fancy Font', serif; 
   } 
   

媒體這不加載fancyfonts.css將回落到您指定的其它字體 - 在這個例子中，serif。

Answer 2

我可以將@ font-face聲明放入@media塊嗎？還是他們必須都是頂級的？

這似乎沒有說明CSS3 Fonts模塊的當前工作草案。但是，CSS Validator拒絕font-face-inside-media，所以最好避免這種情況。