Valeurs de format possibles pour font-face src

Question

Comment savoir quoi utiliser, quand l'utiliser et si vous en avez vraiment besoin ?

De nombreux sites proposent des exemples comme celui-ci, mais dans un ordre différent :

@font-face {
  font-family : « Exemple » ;
  src: url('Exemple.eot');
  src : url('Example.eot?#iefix') format('embedded-opentype'),
       url('Exemple.woff2') format('woff2'),
       url('Exemple.woff') format('woff'),
       url('Exemple.ttf') format('truetype'),
       url('Exemple.svg#svgExample') format('svg');
}
Mais j'ai aussi vu des exemples comme celui-ci : 
@font-face {
  font-family : « Exemple » ;
  src : url('Exemple.woff2') format('woff');
}
@font-face {
  font-family : « Exemple » ;
  src : url('Exemple.ttf') format('woff2-variations');
}
@font-face {
  font-family : « Exemple » ;
  src: url('Exemple.otf');
}
Parfois, le format semble identique à la fin du fichier, parfois la fin du fichier est abrégée ou au moins partiellement identique, et d'autres fois, elles semblent être des chaînes complètement aléatoires, ou parfois rien du tout s'il s'agit simplement d'un fichier. . 

Answer 1

Il n'est pas important de connaître toutes les valeurs de format possibles - puisque beaucoup d'entre elles proviennent d'implémentations expérimentales de navigateurs.

En fait, vous pourriez comparer certaines valeurs de formatage aux préfixes CSS des navigateurs - heureusement, elles sont devenues moins pertinentes - malheureusement, elles le sont encore parfois.

Référez-vous à votre premier @font-face exemple :

@font-face {
  font-family: 'Example';
  src: url('Example.eot'); 
  src: url('Example.eot?#iefix') format('embedded-opentype'),
       url('Example.woff2') format('woff2'),
       url('Example.woff') format('woff'),
       url('Example.ttf') format('truetype'),
       url('Example.svg#svgExample') format('svg');
}

Format .otf ("opentype")

.otf En fait perdu - mais cela n'a rien à voir avec l'utilisation du réseau.

src: url("Example.otf") format("opentype");

Semblables à truetype, ils peuvent être installés localement et utilisés dans n'importe quelle application de bureau.

Dans le jargon du casting de polices : les fichiers de polices OTF sont également connus sous le nom de polices Open Type « à saveur post-script ».
Et les polices .ttf/truetype sont également appelées polices Open Type « à saveur Truetype ».

La police

.otf ne dispose pas d'une compression de fichier avancée par rapport à woff2.

format .eot('embedded-opentype')

Utilisé uniquement par Internet Explorer - mais même ces atrocités sont au moins capables de restituer ttf/truetype.

.eot Obsolète
(Sauf si vous avez besoin de maintenir certains systèmes embarqués fonctionnant sur des systèmes embarqués Windows spéciaux).

Format .svg (« svg »)

Uniquement pris en charge par les navigateurs webkit (safari, epiphany, midori) et les navigateurs Android.
Cependant, tous les navigateurs ci-dessus prennent également en charge woff2, woff ou truetype.
Plus important encore, il n'est pas pris en charge par les navigateurs basés sur Chromium/Blink (opera, Vivaldi, Brave, Internet Explorer 13/Edge) ou Firefox.

Aucun .svg fichier de police n'est requis (bien qu'ils puissent être facilement utilisés comme formats d'échange pour les générateurs d'icônes comme icomoon)

Format .ttf (« truetype »)

Probablement le format de police le mieux pris en charge, mais pas aussi compact que woff2 ou woff.
De plus, les polices truetype sont disponibles dans les environnements de bureau et peuvent donc être installées et utilisées de manière native dans n'importe quelle application.

Toujours pertinent pour certains cas d'utilisation (par exemple, conversion PDF).

Polices variables

Vous rencontrerez peut-être d'anciens symboles comme ceux de cet article : astuces CSS

src: url("Example.woff2") format("woff2 supports variations"),
       url("Example.woff2") format("woff2-variations");

Ces types de formats supplémentaires proviennent d’une époque où la prise en charge des polices variables était encore expérimentale.
Aujourd’hui, ils ne sont plus nécessaires : utilisez simplement des identifiants au format normal.

Vous pourriez aussi abandonner ce format

La plupart des navigateurs modernes peuvent mapper des fichiers de polices à des familles de polices même sans format spécifié.
C'est quand même une bonne idée de les inclure.

Mais : une valeur de format incorrecte peut enfreindre vos règles @font-face !

Erreurs courantes :

url('Example.ttf') format('ttf') //not correct

au lieu de

url('Example.ttf') format('truetype') //correct

...n'oubliez pas les propriétés de poids et de style

@font-face {
  font-family: 'Example';
  src: url('Example.woff2') format('woff2'),
       url('Example.woff') format('woff'),
       url('Example.ttf') format('truetype');
       font-weight:400;
       font-style: normal;
       font-stretch: 100%;
}

/* next font style: e.g bold italic condensed */
@font-face {
  font-family: 'Example';
  src: url('Example_boldItalicCn.woff2') format('woff2'),
       url('Example_boldItalicCn.woff') format('woff'),
       url('Example_boldItalicCn.ttf') format('truetype');
       font-weight:700;
       font-style: italic;
       font-stretch: 50%;
}

Police variable @font-face

Dans ce cas, font-weight et d'autres propriétés contiennent 2 valeurs pour définir la plage, par exemple font-weight: 100 1000.

@font-face {
  font-family: 'Example;
  font-style: normal;
  font-weight: 100 1000;
  font-stretch: 0% 200%;
  src: url(Example.woff2) format('woff2');
}