Qu'est-ce exactement qu'une police Web et qu'implique la conversion en une police?

J'ai lu quelques articles à ce sujet, mais les différences techniques réelles entre les polices Web et les polices de bureau m'échappent toujours. Plus je lis sur le sujet, plus j'ai l'impression que personne n'a une définition technique claire de ce qu'est exactement une police Web.

Lorsque je télécharge une police «de bureau» vers un service générateur de polices Web comme FontSquirrel, que font exactement ces services au fichier de police pour en faire une police Web? Si l'utilisation principale de ces services est la conversion vers différents formats, quels formats sont réellement nécessaires sur le Web moderne pour prendre en charge un nombre raisonnable de navigateurs à partir de 2019?

Une "police Web" est simplement une police utilisée sur le Web ou sur le navigateur. Ce que ces générateurs de polices Web font est de vous simplifier la vie en vous donnant le CSS nécessaire pour servir la police à vos visiteurs et convertir votre police dans tous les formats de fichiers dont vous avez besoin pour vous assurer que la police fonctionne sur plusieurs navigateurs.

Certaines polices sont considérées comme "sécurisées pour le Web" simplement parce qu'elles sont si courantes que chaque ordinateur en possède, comme "Arial". Vous n'avez rien d'autre à faire que de dire au site Web d'utiliser cette police. Les polices Web doivent être téléchargées par le navigateur du visiteur, car si aucune police n'est présente sur votre ordinateur, vous ne la verrez pas.

Les formats de police développés spécifiquement pour le Web, comme Woff, sont conçus avec une petite taille de fichier en tête. Les polices Google vous servent également de différents formats de cette façon, c'est juste un peu caché.

Il est assez important de noter que certaines polices peuvent avoir une licence de polices Web distincte, que vous pourriez ne pas avoir même si vous possédez les fichiers de polices. Tout comme google images ... Ce n'est pas parce que vous avez pu télécharger l'image que vous pouvez l'utiliser pour vendre un après-rasage pour votre entreprise.

Developers.google.com a un bon article qui se concentre sur l'optimisation des polices Web, mais a également quelque chose sur les bases.

Il y a un assez bon extrait sur les différents formats dans cet article:

Aujourd'hui, quatre formats de conteneurs de polices sont utilisés sur le Web: EOT, TTF, WOFF et WOFF2. Malheureusement, malgré le large éventail de choix, il n'y a pas un seul format universel qui fonctionne sur tous les anciens et nouveaux navigateurs: EOT est IE uniquement, TTF a une prise en charge partielle d'IE, WOFF bénéficie de la prise en charge la plus large mais n'est pas disponible dans certains navigateurs plus anciens et la prise en charge de WOFF 2.0 est un travail en cours pour de nombreux navigateurs.

Alors, où en sommes-nous? Il n'y a pas un seul format qui fonctionne dans tous les navigateurs, ce qui signifie que nous devons fournir plusieurs formats pour offrir une expérience cohérente

Transfonter a également un assez bon tableau sur la prise en charge du navigateur:

J'ai fait des recherches plus détaillées après avoir posé cette question, et j'ajoute donc cette réponse comme une sorte d'addendum à celle de Joonas, ce qui était bien mais n'a pas répondu à ma dernière question de manière assez détaillée pour moi:

Si l'utilisation principale de ces services est la conversion vers différents formats, quels formats sont réellement nécessaires sur le Web moderne pour prendre en charge un nombre raisonnable de navigateurs à partir de 2019?

De nombreux développeurs affirment que WOFF et WOFF2 sont les seuls formats de police nécessaires dans le développement Web moderne . Cependant, ces réponses ne sont pas bien fournies et je pense également qu'elles sont un peu trop zélées, alors commençons par regarder les chiffres de support réels pour WOFF et WOFF2, gracieuseté de CanIUse.com, qui est la norme de l'industrie pour documenter cela. genre de chose.

Prise en charge de WOFF2

WOFF2 améliore le WOFF dans tous les sens, est pris en charge par la plupart des navigateurs de bureau publiés après 2014, mais n'a commencé à être pris en charge par la plupart des navigateurs mobiles que depuis 2018 . Il est pris en charge par environ 93% des navigateurs dans le monde.

Prise en charge de WOFF

WOFF a commencé à être pris en charge par Internet Explorer dans IE9 (sorti en 2011), ce qui rend le format EOT obsolète pour les versions d'IE publiées depuis 2011. Il est pris en charge par environ 97% des navigateurs dans le monde.

D'autres navigateurs de bureau ont commencé à prendre en charge WOFF à peu près au même moment, y compris Firefox depuis Firefox 3.6, Chrome depuis Chrome 5 et Safari depuis 5.1 (sorti respectivement en 2010, 2011 et 2011), rendant les formats TTF et OTF ¹ obsolètes dans les versions précédentes. . La plupart des navigateurs mobiles prennent en charge WOFF depuis 2013.

Mise en garde et conclusions

De ce point de vue, il est assez facile d'annuler tous les autres formats comme étant inutiles, mais le logiciel qui n'est plus officiellement pris en charge n'a jamais été un bon indicateur qu'il n'est plus utilisé. En d'autres termes, le partage de version du navigateur mondial n'est pas du tout garanti comme représentatif des données démographiques que votre site Web utilisera.

Le partage de version du navigateur peut varier considérablement selon les données démographiques: des facteurs tels que le pays, la classe sociale et le revenu influencent tous fortement les appareils (et donc les versions des navigateurs) que vos utilisateurs utilisent. En tant que développeur, demandez-vous si le site que vous créez sera utilisé par des données démographiques plus susceptibles d'utiliser ces anciennes versions.

Si vous décidez que c'est le cas et que vous devez prendre en charge les navigateurs de bureau antérieurs à 2011 ou les navigateurs mobiles antérieurs à 2013, utilisez la pile de polices complète: WOFF2, WOFF, TTF (ou OTF) et EOT.

Si vous n'avez pas besoin de prendre en charge ces anciens navigateurs, et il est toujours vrai que vous n'en avez probablement pas, utilisez simplement WOFF2 et WOFF comme pile de polices à partir de là.

_{(1) TTF et OTF sont des formats de police de bureau traditionnels, et tout navigateur qui prend en charge l'un prend en charge l'autre, alors n'utilisez jamais les deux}

Pas tant.

WOFF n'est rien d'autre qu'un format compressé pour TTF, ce qui entraîne une taille plus petite. Les internes ne changent pas. WOFF2 va un peu plus loin, il modifie légèrement la représentation des polices pour obtenir un peu plus de compression. EOT, étant un format MS uniquement, ne compte pas du tout. SVG n'est pratiquement que des contours, à peine plus, donc il ne compte pas comme une vraie police, utilisez-le uniquement pour les icônes, le cas échéant.

Il suffit d'utiliser WOFF et d'en finir. Si vous souhaitez extraire le dernier octet, vous pouvez également proposer WOFF2, mais la différence sera négligeable.

Je voudrais cependant souligner quelque chose de vraiment basique: une «police Web», mise à part les détails techniques de mise en œuvre, est une police que vous avez autorisée, par son créateur ou un détenteur de droits, pour la tâche spécifique d'utilisation sur un site Web. Et ceux-ci viendront dans un format de police Web. Si vous êtes assis devant un générateur pour convertir une police au format webfont et que ce n'est pas open-source ou celui que vous avez dessiné vous-même, arrêtez-vous là! Vous rompez certainement la licence et pourriez être poursuivi. Et comme il est sur le Web, il est facile pour les gens de trouver ce que vous faites et de vérifier leur liste de ventes.

Voir par exemple ce doofus , qui a travaillé pour Facebook et Google, qui ne s'est pas rendu compte jusqu'à ce que quelqu'un lui dise qu'il utilisait techniquement une police piratée sur son site Web. Il avait une licence d'abonnement de bureau, mais ce n'est pas une licence d'utilisation Web.