Base de connaissances des polices WOFF | Aspose.Font

Introduction à la police WOFF

Web Open Font Format (WOFF) est un format de fichier de police conçu pour être utilisé spécifiquement sur le Web. Il a été développé pour surmonter certaines limitations et défis des formats de polices traditionnels, tels que TrueType et OpenType, dans le développement Web.

Le format WOFF vous offre :

Optimisation Web.
Compatibilité entre navigateurs.
Informations sur les licences et les droits d’auteur incluses directement dans le fichier de police.
Typographie améliorée incluant des fonctionnalités telles que les ligatures, le crénage et les alternatives stylistiques.
Accessibilité du Web.

Pour utiliser les polices WOFF dans le développement Web, vous les incluez généralement dans les fichiers HTML et CSS de votre projet à l’aide de la règle @font-face .

Avantages et inconvénients de la police WOFF

Le tableau ci-dessous présente les avantages et les inconvénients des polices WOFF, afin que vous puissiez décider de les utiliser ou non dans votre projet.

Avantages	Inconvénients
Les polices WOFF sont compressées, ce qui réduit leur taille de fichier par rapport à d’autres formats de police. Cela se traduit par des temps de chargement plus rapides pour les pages Web.	Les navigateurs plus anciens peuvent ne pas prendre entièrement en charge ce format. Cela peut être un problème si vous devez prendre en charge des systèmes hérités.
Largement pris en charge par les principaux navigateurs Web, ce qui permet un rendu de police cohérent sur différentes plates-formes et navigateurs.	Certaines polices commerciales de haute qualité peuvent nécessiter l’achat de licences pour les utiliser sur le Web avec le format WOFF.
Les polices WOFF permettent aux créateurs de polices d’intégrer des informations de licence et de copyright dans le fichier de police lui-même.	Les polices WOFF peuvent s’afficher différemment sur différents appareils ou navigateurs en raison de moteurs de rendu de polices différents.
Prend en charge des fonctionnalités typographiques avancées, telles que les ligatures, le crénage et les alternatives stylistiques.	Des techniques d’optimisation de police appropriées sont essentielles pour contrôler la taille des fichiers.
Peut améliorer l’accessibilité Web en offrant un meilleur contrôle sur le rendu des polices, l’espacement et les hauteurs de ligne.
Les polices WOFF peuvent être hébergées sur le même domaine que la page Web, réduisant ainsi le risque de vulnérabilités de sécurité associées aux demandes de polices provenant de plusieurs origines.

Détails techniques des polices WOFF

Web Open Font Format est conçu spécifiquement pour une utilisation sur le Web. Voici quelques détails techniques clés à ce sujet :

Les polices WOFF utilisent des techniques de compression pour réduire la taille du fichier par rapport aux fichiers de polices TrueType ou OpenType bruts.
Ils incluent des métadonnées qui fournissent des informations sur la police, notamment son nom, ses droits d’auteur et ses détails de licence. Il est accessible par programme, ce qui simplifie la conformité des licences de polices.
Les polices WOFF contiennent les données de police nécessaires au rendu du texte, notamment les formes de glyphes, les mesures et d’autres informations relatives aux polices. Ces données sont codées dans un format que les navigateurs Web peuvent interpréter.
Peut inclure des informations d’indication utilisées pour améliorer la lisibilité des polices de petite taille en ajustant la position des glyphes individuels et en contrôlant l’anticrénelage.
Ils peuvent être sous-ensembles, ce qui signifie que seule une partie des glyphes de la police est incluse dans le fichier.
Les polices WOFF sont généralement servies avec un type MIME font/woff ou font/woff2 lorsqu’elles sont demandées par un serveur Web. Le type MIME aide les navigateurs à comprendre comment gérer le fichier de police.
En utilisant les polices WOFF sur une page Web, les développeurs Web définissent souvent une pile de polices de secours en CSS pour s’assurer que si la police WOFF spécifiée n’est pas disponible ou ne se charge pas, le navigateur utilise un système par défaut ou un autre spécifié.
Si les polices WOFF sont hébergées sur un domaine différent de celui de la page Web, les en-têtes CORS doivent être définis sur le serveur de polices pour permettre aux navigateurs Web d’accéder aux fichiers de polices en toute sécurité. Cela permet d’éviter les attaques de falsification de requêtes intersites (CSRF).
En plus du format WOFF d’origine, il existe un format plus récent appelé WOFF2 qui offre une compression encore meilleure et des tailles de fichiers plus petites que WOFF, mais il peut ne pas être pris en charge par tous les anciens navigateurs.
Les polices WOFF peuvent inclure une large gamme de caractères Unicode, ce qui leur permet d’afficher du texte dans plusieurs langues et scripts.

Comment les polices WOFF restituent-elles les glyphes ?

Les polices Web Open Font Format restituent les glyphes d’une manière similaire aux autres formats de police. Lorsqu’un navigateur Web ou un moteur de rendu rencontre du contenu textuel sur une page Web qui nécessite une police spécifique, il suit ces étapes pour restituer les glyphes :

Lorsqu’une page Web est chargée et qu’elle spécifie l’utilisation d’une police particulière via CSS (par exemple, font-family), le navigateur vérifie s’il dispose de la police requise dans son cache. Dans le cas contraire, il lance une requête auprès du serveur Web hébergeant le fichier de police.
Si la police est absente, le navigateur envoie une demande au serveur pour le fichier de police WOFF associé à la famille de polices spécifiée.
Après avoir reçu le fichier de police, le navigateur analyse les données de police WOFF, extrayant des informations sur les formes de glyphes, les métriques, le mappage de caractères (mappage Unicode), etc.
Lorsque le texte est affiché sur la page Web, le navigateur mappe chaque caractère du texte au glyphe correspondant dans la police en fonction des informations Unicode ou d’encodage.
Le navigateur utilise les informations des glyphes pour afficher les caractères individuels sur la page Web. Cela inclut la détermination de la taille, de la position et de l’espacement de chaque glyphe par rapport aux autres glyphes du texte.
Pour améliorer la qualité visuelle du texte et lisser les bords des caractères, le navigateur peut appliquer des techniques d’anticrénelage aux formes des glyphes.
S’il existe des informations de crénage et de ligature, le navigateur peut ajuster l’espacement entre les caractères et remplacer des combinaisons de caractères spécifiques par des ligatures.
Si la police n’est pas disponible ou ne se charge pas, le navigateur utilise une police système par défaut ou une autre spécifiée dans la pile de polices CSS.
Enfin, le navigateur affiche le texte rendu sur la page Web, en utilisant les glyphes générés à partir de la police WOFF.

WOFF de WOFF2 ?

	WOFF	WOFF2
Compression	Utilise une méthode de compression basée sur la compression zlib	Utilise un algorithme de compression plus avancé et plus efficace appelé Brotli. Cette compression est très efficace et produit souvent des fichiers de polices qui sont environ 30 à 50 % plus petits que leurs équivalents WOFF.
Prise en charge du navigateur	A une bonne prise en charge dans les navigateurs Web modernes ; les navigateurs plus anciens peuvent avoir une prise en charge limitée ou inexistante pour ce format.	A une prise en charge plus large parmi les navigateurs modernes.
Taille du fichier	Sont compressés et plus petits que les formats de police bruts, mais leurs tailles de fichier peuvent toujours être relativement importantes.	Ils sont généralement beaucoup plus petits que WOFF et les formats de police bruts d’origine.
Performances	Offrent de meilleures performances par rapport aux formats de polices bruts en raison de leur taille de fichier réduite et de leur diffusion optimisée.	Offrent des performances Web supérieures en réduisant considérablement le temps nécessaire au téléchargement des fichiers de polices.

Comment créer une police WOFF ?

La création d’une police Web Open Font Format (WOFF) implique la conversion d’autres formats de police au format WOFF. Voici les étapes du processus :

Obtenez une police TTF ou OTF. Vous pouvez soit créer votre propre police à l’aide d’un logiciel de conception de polices, soit utiliser une police existante pour laquelle vous disposez des droits de licence appropriés.
Assurez-vous que votre fichier de polices est bien conçu et exempt d’erreurs.
Convertir en WOFF.
Avant d’utiliser la police WOFF sur votre site Web, testez la police et résolvez les problèmes si vous en trouvez.
Hébergez le fichier de police WOFF sur votre serveur Web ou sur un réseau de diffusion de contenu (CDN) afin que votre site Web puisse y accéder. Assurez-vous de définir le type MIME approprié pour les fichiers WOFF, qui est généralement font/woff.
Utilisez la police WOFF en CSS avec la règle @font-face qui définit la police WOFF et spécifiez sa source à l’aide de la propriété src. Voici un exemple :

1    @font-face { 
2        font-family: 'YourFontName'; 
3        src: url('path/to/your-font.woff') format('woff'); 
4    }

Appliquez la police à des éléments HTML spécifiques à l’aide de la propriété font-family dans votre CSS.

1    body { 
2        font-family: 'YourFontName', sans-serif; 
3    }

Assurez-vous que vous disposez des droits de licence appropriés pour la police que vous utilisez sur votre site Web, surtout s’il s’agit d’une police commerciale.

Comment optimiser les fichiers WOFF ?

L’optimisation des polices WOFF (Web Open Font Format) est essentielle pour améliorer les performances Web en réduisant la taille du fichier de police tout en conservant une typographie de haute qualité. Voici les façons dont vous pouvez le faire :

Sous-définir la police garantit que vous n’incluez que les caractères nécessaires à votre site Web. Cela réduira non seulement la taille du fichier, mais vous aidera à le gérer plus facilement.
Découvrez si vous avez vraiment besoin d’informations d’indication et de crénage dans votre police, car cela augmente la taille du fichier. Certaines polices peuvent fonctionner correctement sans allusion ni crénage, en particulier dans les grandes tailles.
Optimisez les glyphes en examinant leurs contours et en supprimant tous les points ou courbes inutiles tout en conservant la qualité visuelle. Un logiciel d’édition de polices peut vous aider dans cette optimisation.
Compressez vos fichiers de polices WOFF à l’aide d’outils tels que gzip ou Brotli sur votre serveur Web pour réduire la taille des fichiers lors de la diffusion des polices dans le navigateur.
Implémentez des en-têtes de mise en cache appropriés sur votre serveur Web pour garantir que les polices sont mises en cache par le navigateur et éviter le retéléchargement inutile des polices lors de visites ultérieures sur votre site Web.
Utilisez un réseau de diffusion de contenu (CDN) qui dispose souvent de mécanismes de mise en cache et de diffusion optimisés qui peuvent améliorer les temps de chargement des polices.
Essayez d’utiliser l’attribut preload dans votre code HTML pour charger les polices critiques au début du processus de chargement de la page afin de réduire les retards de blocage du rendu liés aux polices.
Utilisez la propriété CSS font-display pour contrôler la façon dont les polices sont affichées lors du chargement.
Utilisez des techniques de typographie réactives pour charger différentes variantes de police en fonction de la taille et de la résolution de l’écran. Ayez des requêtes multimédias pour charger différents fichiers de polices pour différents appareils et tailles d’écran.
Limitez le nombre de polices que vous utilisez sur votre site, car chaque police supplémentaire augmente la taille globale du fichier.
Évitez d’appliquer des personnalisations de police excessives (par exemple, plusieurs épaisseurs et styles de police) si elles ne sont pas essentielles à votre conception.
Testez régulièrement les performances de votre site Web à l’aide d’outils tels que Google PageSpeed Insights ou GTmetrix pour identifier les problèmes de performances liés aux polices.

Normes et spécifications du W3C (World Wide Web Consortium) relatives aux polices WOFF.

Le W3C est responsable du développement et du maintien de diverses normes et spécifications liées aux technologies Web, notamment les polices. Une norme importante liée aux polices sur le Web est le Web Open Font Format (WOFF). WOFF est un format de police spécialement conçu pour être utilisé sur le Web et offre un moyen de regrouper les polices pour une livraison et une utilisation efficaces sur les pages Web. Voici quelques points clés du W3C :

WOFF 1.0 (Format de police Web ouvert 1.0) :

Le format WOFF original introduit par le W3C.
Fournit un moyen de regrouper les données de polices pour une utilisation sur le Web, en optimisant la taille des fichiers et les temps de chargement.
Prend en charge les données de police TrueType et OpenType.
Publié sous forme de recommandation du W3C le 3 décembre 2012.

WOFF 2.0 (Format de police Web ouvert 2.0) :

Une version mise à jour du format WOFF avec une compression améliorée et d’autres améliorations.
Offre de meilleurs taux de compression que WOFF 1.0, ce qui entraîne des tailles de fichiers plus petites.
Prend également en charge les données de police TrueType et OpenType.
Publié en tant que recommandation du W3C le 18 août 2016.

Format de fichier WOFF (ébauche de travail) :

Les travaux en cours du W3C sur la spécification des détails techniques du format de fichier WOFF.
Fournit des informations sur la structure des fichiers WOFF, y compris les métadonnées et les données de police.
Aide les implémenteurs et les développeurs à comprendre comment créer et utiliser efficacement les polices WOFF.

Groupe de travail sur les polices Web :

Le groupe de travail sur les polices Web est responsable du développement et du maintien des normes liées aux polices Web, y compris WOFF.
Le travail du groupe consiste notamment à résoudre les problèmes de chargement et de rendu des polices, à optimiser la livraison des polices et à améliorer la sécurité des polices sur le Web.

Module de polices CSS niveau 3 :

Cette spécification CSS définit la manière dont les polices sont référencées et utilisées dans les feuilles de style CSS.
Fournit la règle @font-face, qui permet aux développeurs Web de spécifier des polices personnalisées pour les éléments de la page Web, y compris l’utilisation de polices WOFF.

Conclusion

Le développement et l’utilisation de polices Web Open Font Format (WOFF) ont considérablement amélioré le processus de typographie Web. Ce format de police polyvalent a permis aux concepteurs et aux développeurs Web d’offrir des expériences typographiques plus créatives et plus accessibles aux utilisateurs d’Internet.

WOFF offre une gamme d’avantages, notamment une compression efficace pour des temps de chargement de page plus rapides, une compatibilité améliorée entre navigateurs et la possibilité d’inclure des polices personnalisées sans perdre les performances du site Web. Ils font désormais partie intégrante de la conception Web et sont toujours très populaires et pris en charge.

Polices SVG Polices CFF