Pourquoi devrions-nous inclure ttf, eot, woff, svg,… dans un font-face

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.