Question

I d like to build a common typography stylesheet with a very small number of selectors. As such, I d far prefer to use @media sections for the various versions rather than create different files, each with only a few lines of content.

I d also like to add some @font-face declarations, but I d prefer not to force mobile users to download the fonts given their limited bandwidth.

Can I put the @font-face declaration within the @media block or do they have to both be top-level? If the latter, how can I tell the mobile browsers they don t need to bother downloading the font?

Answer 1

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.

Answer 2

Can I put the @font-face declaration within the @media block or do they have to both be top-level?

This seems unspecified by the current Working Draft of the CSS3 Fonts module. However, the CSS Validator rejects font-face-inside-media, so it s probably best avoided.

友情链接