This page has been robot translated, sorry for typos if any. Original content here.

Compression Gzip des polices EOT, TTF, WOFF et WOFF2 et autres

Gzip-сжатие шрифтов EOT, TTF, WOFF и WOFF2 и других

Une police d'ordinateur est un fichier contenant une description d'un ensemble de caractères alphabétiques, numériques, de service et pseudographiques utilisés pour afficher ces caractères (en particulier du texte) par le programme ou le système d'exploitation.

Lors du développement de projets en ligne, des polices de plug-in sont utilisées. Cependant, après avoir testé la vitesse de téléchargement de l'un des sites avec l'outil PageSpeed ​​Insights , un message indiquant que la compression Gzip n'était pas appliquée au fichier avec les polices * .WOFF2 était apparu , même s'il était activé et configuré depuis longtemps.

Comment compresser les polices de plug-ins à l’aide de Gzip, nous l’expliquerons plus loin dans notre article.

À ce jour, quatre formats de conteneur de polices sont utilisés sur Internet: EOT, TTF, WOFF et WOFF2 . Mais malheureusement, comme d'habitude, malgré la possibilité de choix, il n'existe pas de format unique qui fonctionnerait dans tous les navigateurs:

  • EOT est disponible uniquement dans Internet Explorer.
  • TTF n'est pris en charge que partiellement par ce navigateur.
  • WOFF est plus largement distribué, mais il ne peut pas être utilisé dans certains navigateurs plus anciens.
  • Over support WOFF 2.0 fonctionne actuellement.

Il existe un autre format de conteneur de polices - SVG . Mais cela n’a jamais été supporté dans Internet Explorer et Firefox. Et maintenant, il n'est plus utilisé dans le navigateur Chrome.

À cet égard, nous devons utiliser tous ces formats pour que la page ait la même apparence parmi les utilisateurs de différents navigateurs.

Continuer la compression. Depuis que Nginx est exécuté en tant qu’intermédiaire sur le serveur et sur le serveur Apache, il me suffisait d’activer Gzip uniquement dans Nginx. C'est inclus très simplement. Il est nécessaire d’ajouter une ligne dans le fichier de configuration:

  gzip sur; 

Nous allons maintenant lister les fichiers de pharmacie que nous devons compresser via Gzip:

 gzip_types
 application / atom + xml
 application / javascript
 texte / javascript
 application / json
 application / ld + json
 application / manifeste + json
 application / rss + xml
 application / vnd.geo + json
 font / ttf
 application / x-font-ttf
 application / vnd.ms-fontobject
 application / font-woff
 application / font-woff2
 application / x-web-app-manifest + json
 application / xhtml + xml
 application / xml
 font / opentype
 image / bmp
 image / svg + xml
 image / x-icon
 texte / cache-manifeste
 text / css
 text / plain
 texte / vcard
 text / vnd.rim.location.xloc
 text / vnd.wap.wml
 text / vtt
 composant text / x
 text / x-cross-domain-policy; 

Dans Ubuntu Server, ce fichier est ici: /etc/nginx/nginx.conf

Redémarrez Nginx pour que les modifications prennent effet: nginx -s reload

Vous trouverez des informations plus détaillées sur la compression Gzip dans Nginx sur le site officiel de Nginx.

Dans le même fichier, assurez-vous de vérifier les valeurs du paramètre gzip_types . Tout d’abord, c’est là que application / font-woff2 n’est le plus souvent pas spécifié et que, par conséquent, ce fichier de polices n’a pas été traité par compression Gzip. Dans le même temps, vérifiez la présence d'autres formats de police:

 application / x-font-ttf
 application / vnd.ms-fontobject
 application / font-woff
 application / font-woff2

Ce n'est pas tout. Ouvrez maintenant /etc/nginx/mime.types et vérifiez si ces types sont répertoriés dans ce fichier. Ci-dessous, je donne juste le contenu de tout ce fichier:

 types {
 #
 # Échange de données
 #
 application / atome + atome xml;
 application / json json map topojson;
 application / ld + json jsonld;
 application / rss + xml rss;
 application / vnd.geo + json geojson;
 application / xml rdf xml;
 #
 # Javascript
 #
 application / javascript js;
 #
 # Fichiers manifestes
 #
 application / manifeste + json webmanifest;
 application / x-web-app-manifest + json webapp;
 texte / cache-manifeste appcache;
 #
 # Fichiers multimédia
 #
 audio / midi mid midi kar;
 audio / mp4 aac f4a f4b m4a;
 audio / mpeg mp3;
 audio / ogg oga ogg opus;
 audio / x-realaudio ra;
 audio / x-wav wav;
 image / bmp bmp;
 image / gif gif;
 image / jpeg jpeg jpg;
 image / png png;
 image / svg + xml svg svgz;
 image / tiff tif tiff;
 image / vnd.wap.wbmp wbmp;
 image / webp webp;
 image / x-jng jng;
 vidéo / 3gpp 3gp 3gpp;
 vidéo / mp4 f4p f4v m4v mp4;
 vidéo / mpeg mpeg mpg;
 vidéo / ogg ogv;
 vidéo / quicktime mov;
 vidéo / webm webm;
 vidéo / x-flv flv;
 video / x-mng mng;
 vidéo / x-ms-asf asf asx;
 vidéo / x-ms-wmv wmv;
 vidéo / x-msvideo avi;
 image / x-icon cur ico;
 #
 # Microsoft Office
 #
 application / msword doc;
 application / vnd.ms-excel xls;
 application / vnd.ms-powerpoint ppt;
 application / vnd.openxmlformats-officedocument.wordprocessingml.document docx;
 application / vnd.openxmlformats-officedocument.spreadsheetml.sheet xlsx;
 application / vnd.openxmlformats-officedocument.presentationml.presentation pptx;
 #
 # Polices Web
 #
 application / font-woff woff;
 application / font-woff2 woff2;
 application / vnd.ms-fontobject eot;
 application / x-font-ttf ttc ttf;
 font / ttf ttf;
 font / opentype otf;
 #
 # Autre
 #
 application / java-archive ear jar war;
 application / mac-binhex40 hqx;
 application / octet-stream bin deb dll dmg exe img iso msi msm msp safariextz;
 application / pdf pdf;
 application / postscript ai eps ps;
 application / rtf rtf;
 application / vnd.google-earth.kml + xml kml;
 application / vnd.google-earth.kmz kmz;
 application / vnd.wap.wmlc wmlc;
 application / x-7z-compressé 7z;
 application / x-bb-appworld bbaw;
 application / x-bittorrent torrent;
 application / x-chrome-extension crx;
 application / x-cacao cco;
 application / x-java-archive-diff jardiff;
 application / x-java-jnlp-file jnlp;
 application / x-makeelf s'exécute;
 application / x-opera-extension oex;
 application / x-perl pl pm;
 application / x-pilot pdb prc;
 application / x-rar-compressé rar;
 application / x-redhat-package-manager rpm;
 application / mer x-sea;
 application / x-shockwave-flash swf;
 application / x-stuffit sit;
 application / x-tcl tcl tk;
 application / x-x509-ca-cert crt der pem;
 application / x-xpinstall xpi;
 application / xhtml + xml xhtml;
 application / xslt + xml xsl;
 application / zip zip;
 text / css css;
 text / html htm html shtml;
 text / mathml mml;
 text / plain txt;
 text / vcard vcard vcf;
 text / vnd.rim.location.xloc xloc;
 text / vnd.sun.j2me.app-descriptor jad;
 text / vnd.wap.wml wml;
 text / vtt vtt;
 texte / composante x htc;
 }

Après cela, redémarrez Nginx: nginx -s reload .

Via matovsky.com et wiki