Optimisation de polices web : avantages en taille de fichier et stratégies de chargement pour la conversion de TTF en WOFF2
La conversion de TTF/OTF en WOFF2 réduit la taille du fichier d'environ 30 % par rapport à WOFF, et de 50 % par rapport à TTF non compressé. Associée à des stratégies correctes, elle permet d'optimiser les performances de chargement des pages web.
Mis à jour le 2026-08-11
Avantages de compression en taille de WOFF2
WOFF2 utilise l'algorithme de compression Brotli. Par rapport à WOFF qui utilise la compression gzip, WOFF2 réduit la taille du fichier d'environ 30 %, et par rapport aux polices TTF/OTF brutes non compressées, il réduit la taille du fichier d'environ 50 %.
La compression de la taille réduit directement la quantité de données de police transférées lors du chargement de la page web, diminue l'utilisation de bande passante et raccourcit le temps de chargement des ressources du premier écran. Ceci est particulièrement adapté pour l'accès aux pages dans des environnements de réseau mobile.
Prise en charge de WOFF2 par les navigateurs
Tous les principaux navigateurs de bureau et mobiles publiés après 2016 prennent en charge nativement le format WOFF2, et aucune gestion de compatibilité supplémentaire n'est requise.
Les versions initiales de prise en charge de WOFF2 pour différents navigateurs sont présentées dans le tableau ci-dessous. Toutes les versions de navigateurs grand public actuelles prennent en charge ce format, il peut donc être utilisé en toute sécurité dans des environnements de production.
| Navigateur | Première version avec prise en charge native de WOFF2 |
|---|---|
| Chrome | Chrome 48 (publiée janvier 2016) |
| Firefox | Firefox 44 (publiée janvier 2016) |
| Safari | Safari 10 (publiée septembre 2016) |
| Edge | Edge 14 (publiée août 2016) |
Schéma de coopération entre @font-face et le sous-ensemble de caractères
Lors de l'utilisation de polices WOFF2, vous devez déclarer la police via la règle @font-face dans CSS, et attribuer la position de priorité la plus élevée de l'attribut src au format WOFF2.
L'association avec l'attribut unicode-range permet de créer un sous-ensemble de la police. Chaque @font-face correspond à une plage unicode, et le navigateur charge seulement le sous-ensemble de police requis pour le contenu de la page actuelle, réduisant le chargement de ressources inutiles.
Points clés pour le rendu des polices et l'optimisation des polices CJK
En CSS, vous devez déclarer font-display: swap pour @font-face. Cette propriété permet au navigateur d'afficher le texte avec la police système par défaut avant que la police WOFF2 ait fini de charger, évitant les blocs de texte vides sur le premier écran et garantissant que le contenu du premier écran peut être lu normalement.
Les polices de jeu de caractères CJK (chinois, japonais, coréen) contiennent de plusieurs milliers à plusieurs dizaines de milliers de caractères, et la taille complète du fichier peut atteindre plusieurs MB à plus de dix MB. Vous devez extraire les caractères requis pour la page via la création de sous-ensemble pour maintenir la taille d'un seul fichier dans une plage raisonnable et garantir les performances de chargement.
Questions fréquentes
Dois-je encore conserver les anciens formats WOFF ou TTF en secours ?
Les sites ciblant des utilisateurs grand public peuvent ne conserver que WOFF2. Si vous avez besoin de prendre en charge d'anciens navigateurs publiés avant 2016, vous pouvez ajouter WOFF comme format de secours dans l'attribut src de @font-face, selon les informations publiques officielles du site.
Le résultat de conversion de l'outil en ligne TTF vers WOFF2 est-il conforme ?
Les outils de conversion conformes suivent la spécification du format WOFF2. L'outil de conversion TTF/OTF vers WOFF2 fourni par OKfmt génère des fichiers conformes à la norme, qui peuvent être utilisés directement dans des environnements de production.
Les polices non chinoises nécessitent-elles la création d'un sous-ensemble ?
Les jeux de caractères occidentaux ont une taille native réduite, et la taille complète se situe généralement dans la plage de 100KB à 300KB. Si vous n'utilisez que des caractères courants, vous pouvez également créer un sous-ensemble pour réduire davantage la taille et raccourcir le temps de chargement.