Dans CSS3 font-face
, il existe plusieurs types de fonts comme ttf
, eot
, woff
, svg
et cff
.
Pourquoi devrions-nous utiliser tous ces types?
S’ils sont spécifiques à différents navigateurs, pourquoi leur nombre est-il supérieur au nombre de navigateurs Web majeurs?
En bref, font-face est très ancien, mais ce n’est que récemment qu’il a été soutenu par plus d’IE.
eot
est nécessaire pour les explorateurs Internet plus anciens qu’IE9 – ils ont inventé la spécification, mais eot est un format horrible qui supprime une grande partie des caractéristiques de la police.
ttf
et otf
sont des anciennes fonts normales, mais certaines personnes ont été contrariées par le fait que cela signifiait que quiconque pouvait les télécharger et les utiliser.
À peu près au même moment, iOS sur iPhone et iPad a implémenté des fonts svg
.
Ensuite, woff
été inventé avec un mode qui empêche les gens de pirater la police. C’est le format préféré.
Si vous ne voulez pas prendre en charge IE 8 et versions ultérieures, iOS 4 et versions ultérieures, et Android 4.3 ou version antérieure, vous pouvez simplement utiliser WOFF (et WOFF2, un WOFF plus fortement compressé, pour les navigateurs les plus récents).
@font-face { font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); }
Le support de woff
peut être vérifié sur http://caniuse.com/woff
Le support de woff2
peut être vérifié sur http://caniuse.com/woff2
Woff est une forme compressée (zippée) de la police TrueType – OpenType. Il est petit et peut être livré sur le réseau comme un fichier graphique. Plus important encore, la police est conservée complètement, y compris les tables de règles de rendu dont très peu de gens se soucient, car elles utilisent uniquement le script latin.
Jetez un coup d’œil à [URL morte supprimée]. La police que vous voyez est un web expérimental fourni par smartfont (woff) qui contient des milliers de caractères combinés pour créer des formes complexes. Le texte sous-jacent est un simple code latin de Singhala romanisé. (Copier et coller dans le Bloc-notes et voir).
Seul Woff peut le faire car personne n’a cette police et pourtant elle est visible n’importe où (Mac, Win, Linux et même sur les smartphones de tous les navigateurs, sauf par IE. IE ne prend pas totalement en charge les Open types).
WOFF 2.0, basé sur l’algorithme de compression Brotli et d’autres améliorations par rapport à WOFF 1.0, permet de réduire la taille des fichiers de plus de 30%, et est pris en charge dans Chrome, Opera et Firefox.
http://en.wikipedia.org/wiki/Web_Open_Font_Format http://en.wikipedia.org/wiki/Brotli
http://sth.name/2014/09/03/Speed-up-webfonts/ a un exemple d’utilisation.
Fondamentalement, vous ajoutez une URL src au fichier woff2 et spécifiez le format woff2. Il est important de l’avoir avant le format woff: le navigateur utilisera le premier format qu’il supporte.