如何结合@ 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，所以最好避免这种情况。