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

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

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

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

Bei der Entwicklung von Online-Projekten werden Plug-in-Schriftarten verwendet. Nach dem Testen der Download-Geschwindigkeit einer der Websites mit dem PageSpeed ​​Insights- Tool erschien jedoch eine Meldung, dass die Gzip-Komprimierung nicht auf die Datei mit * .WOFF2- Schriftarten angewendet wurde , obwohl sie lange Zeit aktiviert und konfiguriert war.

Wie man Plug-in-Schriften mit Gzip komprimiert, erklären wir später in unserem Artikel.

Bisher werden im Internet vier Font-Container-Formate verwendet: EOT, TTF, WOFF und WOFF2 . Aber leider, wie es normalerweise der Fall ist, gibt es trotz der Möglichkeit 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 weiter verbreitet, kann aber in einigen älteren Browsern nicht verwendet werden.
  • Über Unterstützung WOFF 2.0 arbeiten derzeit.

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

In diesem Zusammenhang müssen wir alle diese Formate verwenden, damit die Seite unter Benutzern der verschiedenen Browser gleich aussieht.

Setzen Sie die Komprimierung fort. Da ich Nginx auf meinem Server als Front-End und Apache-Backend habe, war es genug für mich, Gzip nur in Nginx zu aktivieren. Es ist sehr einfach enthalten. Es ist notwendig, eine Zeile in der Konfigurationsdatei hinzuzufügen:

  gzip auf; 

Jetzt werden wir die Apotheken-Dateien auflisten, 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 ist diese Datei hier: /etc/nginx/nginx.conf

Starten Sie Nginx neu, damit die Änderungen wirksam werden: nginx -s reload

Für detailliertere Einstellungen der Gzip-Komprimierung in Nginx kann auf der offiziellen Website von Nginx gefunden werden.

Überprüfen Sie in derselben Datei die Werte des Parameters gzip_types . Zunächst einmal ist es dort, dass Anwendung / font-woff2 am häufigsten nicht angegeben ist, und daher diese Schriftart-Datei wurde nicht von Gzip-Komprimierung verarbeitet. Überprüfen Sie gleichzeitig, ob andere Schriftformate vorhanden sind:

 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 gebe ich nur den Inhalt dieser gesamten Datei an:

 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;
 #
 # Manifest Dateien
 #
 Anwendung / Manifest + Json Webmanifest;
 application / x-web-app-manifest + json webapp;
 Text / Cache-Manifest-Appcache;
 #
 # Mediendateien
 #
 Audio / Midi Mitte 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;
 #
 # Webschriften
 #
 Anwendung / 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 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