Question

我想用很少的选择器构建一个通用的排版样式表。因此，我更倾向于使用@media部分用于各种版本，而不是创建不同的文件，每个文件只有几行内容。

我还想添加一些@font-face声明，但我不想强迫移动用户在有限的带宽下下载字体。

我可以将@font-face声明放在@media块内，还是必须同时为顶级？如果是后者，我怎么能告诉移动浏览器他们不需要费心下载字体？

Answer 1

CSS2 spec建议这样的事情。

将您的@font-face声明放在单独的CSS文件中，例如fancyfonts.css。
在主CSS文件中加载fancyfonts.css，但使用媒体目标声明：
```
@import url("fancyfonts.css") screen;
```
在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，因此最好避免使用它。