Pourquoi devrions-nous inclure ttf, eot, woff, svg,… dans une police

299

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?

css font-face webfonts

— user16948
source

Réponses:

425

Réponse en 2019:

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)

Réponse originale de 2012:

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

— Rich Bradshaw
source

iOS 5 prend en charge WOFF.

— Rob

woff... a un mode qui empêche les gens de pirater la police ? Comment diable cela peut-il fonctionner?

— Mark Amery

TTF ne devrait pas être plus léger que WOFF. WOFF est une forme compressée de TrueType - police OpenType (ttf et otf).

— toto_tico

Le point de WOFF n'est pas anti-piratage. Selon TypeKit , "les deux principaux avantages des polices OpenType / CFF par rapport aux polices TrueType sont 1) leur taille de fichier plus petite, et que 2) elles nécessitent beaucoup moins d'informations de conseil afin de bien s'afficher dans les environnements qui permettent une certaine forme d'anti-aliasing. "

— Michael McGinnis

Les outils @Zelphir compliquent la création de polices intégrables avec ce drapeau, et votre concepteur de run-off-the-mill est analphabète en programmation et ne peut supprimer le drapeau que si quelqu'un a conçu une application Mac avec un bouton brillant "police pirate". De plus, s'il s'agit d'une société, vous pouvez engager des poursuites judiciaires. S'ils sont un gars avec un blog, parlez-leur, à défaut, leur hôte, etc. - mais gardez à l'esprit que les gens qui ne peuvent pas acheter votre police ne sont pas des clients potentiels de toute façon, alors je dirais que la publicité gratuite vaut plus que les tracas de les convaincre de l'échanger contre la chose la plus proche sur dafont.

— Camilo Martin

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).

— user2422970
source

Je ne vois rien de spécial sur ce site Web. Si je le copie dans un éditeur (prend en charge utf8) je ne vois toujours que du texte normal. Qu'est-ce que Woff fait exactement?

— Zelphir Kaltstahl

Les deux tiers de cette réponse sont soit erronés soit non pertinents. Ce lien est également rompu.

— Yay295

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.

— Jyrki Alakuijala
source