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

Gzip-Komprimierung von EOT-, TTF-, WOFF- und WOFF2-Fonts und anderen

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

Eine Computerschriftart ist eine Datei, die eine Beschreibung einer Reihe alphabetischer, numerischer, Dienst- und Pseudozeichen enthält, die zum Anzeigen dieser Zeichen (insbesondere Text) durch das Programm oder das Betriebssystem verwendet werden.

Bei der Entwicklung von Internetprojekten werden Plug-in-Schriftarten verwendet. Nach dem Testen der Ladegeschwindigkeit eines der Sites mit dem PageSpeed ​​Insights- Tool wurde jedoch eine Meldung ausgegeben, dass die Datei mit * .WOFF2- Fonts keine Gzip-Komprimierung verwendet , obwohl sie lange Zeit aktiviert und konfiguriert wurde.

Wie man die connectable Fonts mit Gzip komprimiert, werden wir später in diesem Artikel diskutieren.

Bis heute verwendet das Internet vier Formate von Font-Containern: EOT, TTF, WOFF und WOFF2 . Aber leider gibt es, wie immer, trotz der Auswahl kein einziges Format, das in allen Browsern funktionieren würde:

  • EOT ist nur im Internet Explorer verfügbar.
  • TTF wird in diesem Browser nur teilweise unterstützt.
  • WOFF ist häufiger als andere, aber es kann nicht in einigen älteren Browsern verwendet werden.
  • Über die Unterstützung von WOFF 2.0 arbeiten jetzt.

Es gibt ein anderes Format für den Font-Container - SVG . Aber es wurde nie in Internet Explorer und Firefox unterstützt. Jetzt wird es im Chrome-Browser nicht mehr verwendet.

In dieser Hinsicht müssen wir alle diese Formate verwenden, um die Seite für Benutzer verschiedener Browser gleich aussehen zu lassen.

Lassen Sie uns mit der Komprimierung fortfahren. Da ich Nginx als Frontend auf dem Server und dem Apache-Backend verwende, war es ausreichend, Gzip nur in Nginx zu aktivieren. Es schaltet sich sehr einfach ein. Sie müssen eine Zeile in der Konfigurationsdatei hinzufügen:

  gzip auf; 

Nun listen wir die Datei-Pharmas auf, die wir über Gzip komprimieren müssen:

 gzip_types
 Anwendung / Atom + Xml
 Anwendung / Javascript
 Text / Javascript
 Anwendung / json
 Anwendung / ld + json
 Anwendung / Manifest + JSON
 Anwendung / rss + xml
 Anwendung / vnd.geo + json
 Schriftart / ttf
 Anwendung / x-Schriftart-ttf
 application / vnd.ms-fontobject
 Anwendung / Schriftart-Woff
 Anwendung / Schriftart-woff2
 Anwendung / x-Web-App-Manifest + JSON
 Anwendung / xhtml + xml
 Anwendung / XML
 Schriftart / Opentyp
 Bild / BMP
 image / svg + xml
 Bild / x-Symbol
 Text / Cache-Manifest
 Text / CSS
 Text / Ebene
 Text / Vcard
 text / vnd.rim.location.xloc
 Text / vnd.wap.wml
 Text / vtt
 Text / x-Komponente
 text / x-cross-Domänenrichtlinie; 

In Ubuntu Server befindet sich diese Datei hier: /etc/nginx/nginx.conf

Damit die Änderungen wirksam werden, starten Sie Nginx: nginx -s reload neu

Genauere Einstellungen der Gzip-Kompression in Nginx finden Sie auf der offiziellen Seite von Nginx.

Überprüfen Sie in derselben Datei die Werte des Parameters gzip_types . Erstens gibt es normalerweise nicht application / font-woff2 an und deshalb wurde diese Font-Datei nicht von Gzip-compression verarbeitet. Überprüfen Sie gleichzeitig die Verfügbarkeit anderer Schriftformate:

 Anwendung / x-Schriftart-ttf
 application / vnd.ms-fontobject
 Anwendung / Schriftart-Woff
 Anwendung / Schriftart-woff2

Das ist nicht alles. Öffnen Sie nun /etc/nginx/mime.types und prüfen Sie, ob diese Typen in dieser Datei aufgeführt sind. Im Folgenden lese ich einfach den Inhalt dieser gesamten Datei auf:

 Typen {# # Datenaustausch # Anwendung / Atom + Xml Atom;  Anwendung / JSON JSON Karte Topojson;  Anwendung / ld + json jsonld;  Anwendung / rss + xml rss;  Anwendung / vnd.geo + json geojson;  Anwendung / xml rdf xml;  # # JavaScript # Anwendung / Javascript js;  # # Manifestdateien # application / manifest + json webmanifest;  application / x-web-app-manifest + json webapp;  Text / Cache-Manifest-Appcache;  # # Mediendateien # 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;  Bild / jpeg jpeg jpg;  image / png png;  image / svg + xml svg svgz;  image / tiff tif tiff;  image / vnd.wap.wbmp wbmp;  Bild / Webp Web;  image / x-jng jng;  Video / 3gpp 3gp 3gpp;  Video / mp4 f4p f4v m4v mp4;  video / mpeg mpeg mpg;  video / ogg ogv;  Video / QuicktimeMov;  Video / Webm Webm;  video / x-flv flv;  video / x-mng mng;  video / x-ms-asf asf asx;  video / x-ms-wmv wmv;  video / x-msvideo avi;  Bild / x-icon cur ico;  # # Microsoft Office # Anwendung / msword doc;  Anwendung / 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;  # # Webfonts # application / font-woff woff;  Anwendung / font-woff2 woff2;  application / vnd.ms-fontobject eot;  application / x-font-ttf ttc ttf;  font / ttf ttf;  Schriftart / Opentype otf;  # # Andere # Anwendung / Java-Archiv Ear Jar Krieg;  Anwendung / mac-binhex40 hqx;  Anwendung / Oktett-Stream bin deb dll dmg exe img iso msi msm msp safariextz;  Anwendung / pdf;  Anwendung / PostScript ai EPS PS;  Anwendung / rtf rtf;  application / vnd.google-earth.kml + xml kml;  Anwendung / vnd.google-earth.kmz kmz;  application / vnd.wap.wmlc wmlc;  Anwendung / x-7z-komprimiert 7z;  Anwendung / x-bb-appworld bbw;  Anwendung / x-bittorrent torrent;  Anwendung / x-chrome-extension crx;  Anwendung / x-Kakao cco;  Anwendung / x-Java-Archiv-diff Jardiff;  Anwendung / x-java-jnlp-Datei jnlp;  application / x-makeself run;  Anwendung / X-Opera-Erweiterung oex;  Anwendung / x-perl pl pm;  Anwendung / x-pilot pdb prc;  Anwendung / x-rar-komprimierter rar;  Anwendung / x-redhat-Paket-Manager rpm;  Anwendung / x-Meer;  Anwendung / x-shockwave-flash swf;  application / x-stuffit sitzen;  Anwendung / x-tcl tcl tk;  Anwendung / x-x509-ca-cert crt der pem;  Anwendung / x-xpinstall xpi;  application / xhtml + xml xhtml;  Anwendung / xslt + xml xsl;  Anwendung / Zip-Zip;  Text / CSS css;  text / html htm html shtml;  Text / Mathe ml mml;  Text / Nurtxt;  text / vcard vcard vcf;  text / vnd.rim.location.xloc xloc;  text / vnd.sun.j2me.app-Deskriptor jad;  text / vnd.wap.wml wml;  Text / vtt vtt;  Text / x-Komponente htc;  } 

Starten Sie danach Nginx: nginx -s neu laden .

Über matovsky.com & wiki