En CSS3 font-face , il existe plusieurs types de polices inclus comme ttf, eot, woff, svget 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 des principaux navigateurs Web?
Utilisez uniquement WOFF2, ou si vous avez besoin d'un support hérité, WOFF. N'utilisez aucun autre format
( svget eotsont des formats morts, ttfet otfsont des polices système complètes, et ne doivent pas être utilisés à des fins Web)
En bref, font-face est très ancien, mais ce n'est que récemment qu'il a été supporté par plus qu'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.
ttfet otfsont des anciennes polices normales, donc certaines personnes étaient ennuyées par le fait que tout le monde pouvait télécharger gratuitement des polices coûteuses sous licence.
Le temps passe, SVG 1.1 ajoute un chapitre "polices" qui explique comment modéliser une police en utilisant uniquement le balisage SVG, et les gens commencent à l'utiliser. Plus le temps passe et il s'avère qu'elles sont absolument terribles par rapport à un format de police normal, et SVG 2 supprime judicieusement le chapitre entier.
Ensuite, il woffest inventé par des personnes ayant une bonne connaissance du domaine, ce qui permet d'héberger des polices d'une manière qui jette les bits qui sont d'une importance cruciale pour l'installation du système, mais sans pertinence pour le Web (ce qui rend les gens préoccupés par le piratage) et permet une compression interne pour mieux répondre aux besoins du Web (rendre les utilisateurs et les hôtes heureux). Cela devient le format préféré.
Édition 2019 Quelques années plus tard, woff2est rédigé et accepté, ce qui améliore la compression, conduisant à des fichiers encore plus petits, ainsi qu'à la possibilité de charger une seule police "en plusieurs parties" afin qu'une police prenant en charge 20 scripts puisse être stockée en tant que "morceaux "sur le disque à la place, avec les navigateurs capables de charger automatiquement la police" en plusieurs parties "selon les besoins, plutôt que de devoir transférer la police entière à l'avance, améliorant encore l'expérience de composition.
Si vous ne souhaitez pas prendre en charge IE 8 et inférieur, et iOS 4 et inférieur, et Android 4.3 ou antérieur, vous pouvez simplement utiliser WOFF (et WOFF2, un WOFF plus fortement compressé, pour les navigateurs les plus récents qui le prennent en charge.)
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
}
La prise en charge de woffpeut être vérifiée sur http://caniuse.com/woff La
prise en charge de woff2peut être vérifiée sur http://caniuse.com/woff2
woff... a un mode qui empêche les gens de pirater la police ? Comment diable cela peut-il fonctionner?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, de cette façon, la police est entièrement préservée, y compris les tables de règles de rendu que très peu de gens se soucient car ils utilisent uniquement un script latin.
Jetez un œil à [URL morte supprimée]. La police que vous voyez est une smartfont (woff) Web expérimentale qui a des 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).
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 par tous les navigateurs sauf par IE. IE ne prend pas totalement en charge les types ouverts).
la source
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 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 sur la façon de l'utiliser.
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 prend en charge.
la source