web-dev-qa-db-fra.com

Eot, ttf et svg sont-ils toujours nécessaires dans la déclaration font-face?

Jusqu'à présent, j'ai utilisé Paul Irish syntaxe pare-balles de police

Mais je cherchais juste à prendre en charge les fichiers .woff et .woff2 sur caniuse et il indique que woff est pris en charge dans IE9 +. La plupart des articles sur ce sujet datent d'environ 2009, ce qui, au moment de la rédaction de ce rapport, était il y a 7 ans. Avons-nous vraiment besoin de continuer à déclarer ttf, otf, eot et svg lorsque woff bénéficie désormais d'un support aussi large?

31
paulcpederson

Réponse courte: non.

EOT n'est pertinent que pour IE8 et les versions antérieures (bien que trivial: jusqu'à IE4. IE a en fait été le pionnier des polices Web), et les polices SVG en tant que technologie (not ​​to être confondu avec les polices OpenType avec des contours SVG) ont été abandonnés ( au début de 2015 ) parce que les limitations étaient folles une fois que les véritables polices Web ont commencé à à partir de 2016 vous avez juste besoin de WOFF . Et WOFF2 si vous voulez profiter de la nouvelle version améliorée de WOFF qui seulement est devenu une recommandation w3 (au moment de cette réponse).

Pour faciliter les choses, à partir du 12 janvier 2016, Microsoft a cessé de prendre en charge IE8 et versions antérieures , avec une prise en charge limitée d'IE9: ils ne prendront désormais en charge que le dernier navigateur disponible pour chacun d'eux encore pris en charge OS, ce qui signifie qu'IE9 n'est plus pris en charge pour Windows XP, car XP lui-même n'est plus pris en charge, mais est techniquement ​​toujours — grossièrement — pris en charge jusqu'à Vista SP2 et serveur 2008 R2 atteint la fin de la prise en charge étendue en 2017 et 2020, respectivement. Bien sûr, pour Windows Server 2008, la prise en charge des polices Web n'est pas pertinente, et la plupart des entreprises qui utilisent toujours une ancienne version de Windows ont ignoré Vista, étant soit sur Windows XP (à leurs risques et périls) ou Windows 7 (que nous pouvons espérer devenir Windows 10 en juillet 2016, dont le 29 est la dernière date les gens peuvent passer de 7/8.1 - mais pas 8 - à 10 gratuitement).

(Édition d'avril 2017: Windows Vista SP2 n'est plus pris en charge ce mois-ci, et en tant que tel, IE9 n'est désormais officiellement plus pris en charge)

Quant au TTF/OTF, vous ne voulez pas les utiliser en ligne plus que vous ne voudriez utiliser des images TIFF plutôt que JPG ou PNG: même si WOFF est "juste" un mince wrapper autour des données TTF/OTF, WOFF/WOFF2 autorise la compression des données, contrairement à OpenType standard.

De plus, TTF/OTF sont des polices universelles (pour les systèmes qui prennent en charge OpenType), et sont donc examinées de plus près pour leur exactitude, en particulier par les versions d'IE. L'utilisation de WOFF, qui en tant que type de fichier le rend explicite, est un [~ # ~] w [~ # ~] eb ( [~ # ~] o [~ # ~] stylo) [~ # ~] f [~ # ~] ont ( [~ # ~] f [~ # ~] ormat), une forme d'examen moins stricte signifie que certaines polices qui échouer une passe de vérification OpenType système peut toujours fonctionner très bien en tant que polices Web (en raison du fait que toutes les données OpenType requises pour l'universalité ne sont pas nécessaires pour qu'une police fonctionne dans un contexte Web uniquement).

Enfin, vous avez le choix entre les formats WOFF: le format 1, juste appelé WOFF, est l'ancien format et utilise une compression basée sur deflate, similaire à la compression PNG; et le format 2, appelé WOFF2, est le nouveau format avec compression basé sur l'algorithme brotli, et permet également de "découper" une police dans des fichiers séparés pour une livraison optimisée lorsqu'il s'agit de polices unicode qui prennent en charge plusieurs langues. Vous n'avez pas besoin de tous les fichiers en même temps, alors ne livrez que les fichiers qui couvrent les plages Unicode nécessaires pour une page spécifique et vous réduisez encore la taille de la page et les temps de chargement.

En conclusion: bravo pour la marche du progrès, utilisez simplement WOFF (ou WOFF2).

Et, bien sûr, n'oubliez pas d'indiquer le format de vos sources @font-face En utilisant la valeur format() .

Édition d'octobre 2018

WOFF2 est fondamentalement omniprésent à ce jour, alors ne vous embêtez même pas avec WOFF à moins que vous sachiez que votre public est sur des appareils obsolètes, étant donné que WOFF est inférieur à WOFF2 à tous égards.

59