web-dev-qa-db-fra.com

Pourquoi devrions-nous inclure ttf, eot, woff, svg, ... dans une fonte-face

Dans CSSfont-face, plusieurs types de polices sont inclus, tels que 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 à celui des principaux navigateurs Web?

css3font-facewebfonts
272
user16948

Réponse en 2019:

Utilisez uniquement WOFF2 ou, si vous avez besoin d’un support existant, WOFF. N'utilisez aucun autre format

(svg et eot sont des formats morts, ttf et otf sont des polices système complètes et ne doivent pas être utilisées à des fins Web.)

Réponse originale de 2012:

En bref, font-face est très ancien, mais ce n’est que récemment qu’il a été pris en charge par plus de IE.

  • eot est nécessaire pour les explorateurs Internet plus anciens que IE9: ils ont inventé la spécification, mais eot était une solution propriétaire.

  • ttf et otf sont d'anciennes polices normales, de sorte que certaines personnes se sont gênées pour dire que tout le monde pouvait télécharger gratuitement des polices très chères.

  • Le temps passe, SVG 1.1 ajoute un chapitre "polices" qui explique comment modéliser une police uniquement à l'aide d'un balisage SVG et que les gens commencent à l'utiliser. Plus le temps passe et il s’avère qu’ils sont absolument terribles par rapport à un format de police normal, et SVG 2 supprime à nouveau le chapitre en entier.

  • Ensuite, woff est inventé par des personnes possédant une connaissance approfondie du domaine, ce qui permet d’héberger des polices de manière à supprimer les éléments essentiels à l’installation du système, mais non pertinents pour le Web (inquiétude piratage) et permet une compression interne mieux adaptée aux besoins du Web (rendre les utilisateurs et les hôtes heureux). Cela devient le format préféré.

  • 2019 modifier Quelques années plus tard, woff2 est rédigé et accepté, ce qui améliore la compression, ce qui permet d'obtenir des fichiers encore plus petits, ainsi que la possibilité. pour charger une seule police "par parties" de sorte qu'une police prenant en charge 20 scripts puisse plutôt être stockée sous forme de "morceaux" sur le disque, les navigateurs pouvant automatiquement charger la police "par parties" selon les besoins, sans avoir à transférer l'intégralité police à l’avance, améliorant encore l’expérience de la composition.

Si vous ne souhaitez pas prendre en charge IE 8 et versions antérieures, et iOS 4 et versions antérieures, et Android 4.3 ou versions antérieures, vous pouvez simplement utiliser WOFF (et WOFF2, une version plus avancée). WOFF compressé, pour les navigateurs les plus récents qui le supportent.)

@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}

La prise en charge de woff peut être vérifiée à partir de http://caniuse.com/woff
La prise en charge de woff2 peut être vérifiée à l’aide de http://caniuse.com/woff2

372
Rich Bradshaw

Woff est une forme compressée (zippée) de la police TrueType - OpenType. Il est petit et peut être distribué sur le réseau comme un fichier graphique. Plus important encore, cette police préserve complètement la police, y compris le rendu des tables de règles qui intéressent peu de gens, car elles utilisent uniquement le script latin.

Jetez un coup d'œil à [URL morte supprimée]. La police que vous voyez est une smartfont (woff) Web expérimentale, composée de milliers de caractères combinés créant des formes complexes. Le texte sous-jacent est un simple code latin de singhala romanisé. (Copiez et collez dans le Bloc-notes et voyez).

Ce n'est que woff qui 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, à l'exception de IE. IE ne prend pas totalement en charge Open Types).

21
user2422970

WOFF 2.0, basé sur l'algorithme de compression Brotli et d'autres améliorations par rapport à WOFF 1.0 permettant une réduction de plus de 30% de la taille du fichier, est pris en charge par Chrome, Opera et Firefox.

http://en.wikipedia.org/wiki/Web_Open_Font_Formathttp://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 d’avoir cela avant le format woff: le navigateur utilisera le premier format qu’il prend en charge.

9
Jyrki Alakuijala