All geek questions in one place

How to combine @ font-face and @media ads?

I would like to create a common typography style sheet with very few selectors. Therefore, I prefer to use partitions @mediafor different versions, rather than creating different files, each of which contains only a few lines of content.

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

Can I place an ad @font-facein a block @mediaor should they be at the top level? If the latter, how can I tell mobile browsers that they don’t need to download the font?

+3
source share
2 answers

The CSS2 specification offers something like this.

  • Put your ads @font-facein a separate CSS file, for example fancyfonts.css.

  • Upload fancyfonts.cssto your main CSS file, but with a media target declaration:

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

  • Indicate your fantastic font in the attribute font-family.

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

Media that don’t download fancyfonts.csswill return to the other specified fonts - in this example serif.

+3
source

Is it possible to place an @ font-face ad in an @media block or should they be at the top level?

CSS3 Fonts. , CSS Validator font-face-inside-media, .

+1

Source: https://habr.com/ru/post/1722136/

More articles:


All Articles