All geek questions in one place

When using CSS @ font-face, in what order do browsers use different types?

When using @font-face in CSS, it is documented somewhere, what types of fonts work in each of the main browsers, as well as the priority they give for different types of fonts if one or more of them are missing? I tried and could not answer Google.

 @font-face { font-family: 'myfont'; src: url('myfont.eot'); src: url('myfont.eot?#iefix') format('embedded-opentype'), url('myfont.woff') format('woff'), url('myfont.ttf') format('truetype'), url('myfont.svg#myfont') format('svg'); font-weight: normal; font-style: normal; }

Hope something like ...

Formats are allowed in order of preference:

  • IE10: TTF, EOT, WOFF
  • IE9: EOT, WOFF
  • IE8: ...
  • Chrome: ...
  • Mobile Chrome: ...
  • Firefox: ...
  • Safari: ...
  • Mobile Safari: ...
+1
source share
2 answers

The value of the src property is a priority list, so each browser will use the first font in the list, which is supported in the format. From CSS fonts Module Level 3 CR, section 4.3 Font reference: src descriptor : "Its value is a list of priorities separated by commas of external links or locally installed font names of individuals. When a font is needed, the user agent iterates through the list of listed links, using the first one that it can successfully activate. Fonts containing invalid data or local faces of the font that are not found are ignored, and the user agent loads the next font into the list. "

+3
source

The five most widely used desktop browsers ( Internet Explorer , Firefox , Safari , Chrome , Opera ) now support embedded font embedding using the @ font-face CSS ad, but no browser supports all four available formats ( .ttf, .woff, .eot, .svg ). Therefore, be sure to include all four in your webfont kits to be certain of cross-browser support .

your requirement is met here http://webfonts.info/node/379

0
source

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

More articles:


All Articles