当前位置：文江博客话题详情

如何组合 @font-face 和 @media 声明？

发布于 2024-08-10 21:59:50 字数 261 浏览 3 评论 0原文

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

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

我可以将 @font-face 声明放在 @media 块中还是它们都必须是顶级的？如果是后者，我如何告诉移动浏览器他们不需要费心下载字体？

需要登录才能够评论，你可以免费注册一个本站的账号。

盗琴音 2024-08-17 21:59:50

CSS2 规范建议了类似这样的内容。

将您的 @font-face 声明放入单独的 CSS 文件中，例如 fancyfonts.css。
在主 CSS 文件中加载 fancyfonts.css，但带有媒体目标声明：
```
@import url("fancyfonts.css") 屏幕；
```
在 font-family 中指定您的精美字体代码> 属性。
<前><代码>正文{
font-family: '我的花式字体', serif;
}

不加载 fancyfonts.css 的媒体将回退到您指定的其他字体 - 在本例中为 serif。

The CSS2 spec suggests something like this.

Put your @font-face declarations in a separate CSS file, such as fancyfonts.css.
Load fancyfonts.css in your main CSS file, but with a media-target declaration:
```
@import url("fancyfonts.css") screen;
```
Specify your fancy font in the font-family attribute.
```
body {
  font-family: 'My Fancy Font', serif;
}
```

Media which don't load the fancyfonts.css will fall back to the other fonts you specify -- in this example, serif.