Pourquoi devrions-nous inclure ttf, eot, woff, svg,... dans un visage de police
Dans CSS3 font-face, il existe plusieurs types de police inclus 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 des principaux navigateurs web?
3 réponses
En bref, font-face est très ancien, mais seulement récemment a été pris en charge par Plus de IE.
eotest nécessaire pour les explorateurs Internet qui sont plus âgés que IE9 - ils ont inventé la spécification, mais eot est un format horrible qui supprime une grande partie des fonctionnalités de police.ttfetotfsont des polices anciennes normales, mais certaines personnes se sont ennuyées que cela signifiait que n'importe qui pouvait les télécharger et les utiliser.À peu près au même moment, iOS sur l'iPhone et l'iPad implémenté
svgpolices.Ensuite,
woffa été inventé qui a 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 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 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 à http://caniuse.com/woff
Soutien pour woff2 peut être vérifié à 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, de cette façon, la police est préservée complètement, y compris les tables de règles de rendu que très peu de gens se soucient parce qu'ils utilisent uniquement le script Latin.
Jetez un oeil à [URL morte supprimée]. La police que vous voyez est un Web expérimental livré smartfont (woff) qui a des milliers de caractères combinés faisant des formes complexes. Le le texte sous-jacent est simple code Latin de Singhala romanisé. (Copier et coller sur le bloc-notes et voir).
Seul woff peut le faire car personne n'a cette police et pourtant elle est vue n'importe où (Mac, Win, Linux et même sur les smartphones par tous les navigateurs sauf par IE. IE n'a pas de support complet pour les Types ouverts).
WOFF 2.0, basé sur L'algorithme de compression Brotli et d'autres améliorations sur WOFF 1.0 donnant plus de 30% de réduction 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 d'avoir ceci avant le format woff: le navigateur utilisera le premier format qu'il prend en charge.