Gzip-Kompression EOT-Fonts, TTF, WOFF und andere WOFF2

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

Computer - Druck - eine Datei , die eine Beschreibung einer Reihe von Zahlen, Buchstaben enthalten, und offizielle pseudographic Zeichen verwendet , um diese Symbole angezeigt werden (zB Text) Programm oder das Betriebssystem.

Bei der Entwicklung von Plug-Fonts Internet-Projekte verwendet. Doch nach der Website Ladegeschwindigkeit eines der Werkzeuge zu testen Pagespeed Insights zeigt eine Meldung an, dass die Datei mit Schriftarten * .WOFF2 nicht gzip-Kompression anwenden, obwohl es lange aktiviert und konfiguriert hat.

Wie podklyuchaemmye Schriftarten mit gzip zu komprimieren wir später in diesem Artikel beschreiben.

Bis heute sind die Internet vier Schriftgröße Behälter: EOT, TTF, WOFF und WOFF2. Aber leider, wie es gewöhnlich der Fall ist, trotz der Möglichkeit der Wahl, es gibt keinen einzigen Format, das in allen Browsern funktionieren würde:

  • EOT ist nur im Internet Explorer zur Verfügung.
  • TTF ist nur zum Teil auf diesem Browser nicht unterstützt.
  • WOFF verbreiten breiter als der andere, aber es kann in einigen älteren Browsern verwendet werden.
  • Oberhalb der Unterstützung WOFF arbeiten 2.0 derzeit.

Es ist ein weiterer Container - Format Fonts - SVG. Aber er nie in Internet Explorer und Firefox unterstützt. Und heute wird nicht mehr in Chrome.

In dieser Hinsicht müssen wir diese Formate verwenden, so dass die Seite, die gleiche für Nutzer von verschiedenen Browsern aussieht.

Wir sind weiterhin der Kompression. Da ich als Server-Front-End läuft Nginx und Backend Apache, es war genug für mich gzip nur Nginx zu ermöglichen. Es stellt sich sehr einfach. Es sollte in der Konfigurationsdatei, fügen Sie die Zeile:

  gzip auf; 

Lassen Sie uns Farmat Liste, dass wir die Dateien benötigt, durch gzip komprimieren:

 gzip_types
 application / Atom + xml
 application / javascript
 text / javascript
 application / json
 application / ld + json
 application / manifest + 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
 text / Cache-Manifest
 text / css
 text / plain
 text / V-Card
 text / vnd.rim.location.xloc
 text / vnd.wap.wml
 text / VTT
 text / x-Komponente
 text / x-Cross-Domain-Politik; 

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

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

Auf einer detaillierteren gzip-Komprimierungseinstellungen in Nginx Nginx kann auf der offiziellen Website.

In der gleichen Datei, sollten Sie die Einstellung gzip_types zu überprüfen. Zunächst einmal gibt es am häufigsten Anwendung / font-woff2 angegeben, sondern weil die Font - Datei wird nicht gzip-Kompression verarbeitet. Zugleich Prüfung und das Vorhandensein der anderen Schriftformate:

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

Das ist nicht alles. Nun öffnen /etc/nginx/mime.types und prüfen , ob sie in den Dateitypen aufgelistet sind. Im Folgenden werde ich den gesamten Inhalt dieser Datei nur geben:

 Arten {
 #
 # Datenaustausch
 #
 application / Atom + xml-Atom;
 application / json json Karte topojson;
 application / ld + json JSON-LD;
 application / rss + xml rss;
 application / vnd.geo + json GeoJSON;
 application / xml rdf xml;
 #
 # JavaScript
 #
 application / javascript js;
 #
 # Manifest-Dateien
 #
 application / manifest + json webmanifest;
 application / x-web-app-Manifest + json Webapp;
 text / cache-manifest AppCache;
 #
 # Media-Dateien
 #
 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;
 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;
 Video / 3GPP 3gp 3GPP;
 Video / mp4 F4P f4v m4v mp4;
 video / mpeg mpeg mpg;
 Video / ogg ogv;
 video / quicktime mov;
 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;
 image / x-icon Köter 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;
 #
 # Web Fonts
 #
 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;
 #
 # Andere
 #
 application / java-Archiv Ohr jar Krieg;
 application / mac-binhex40 hqx;
 application / octet-stream bin deb dll dmg exe img iso msi msm msp safariextz;
 application / pdf pdf;
 application / Nachsatz 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 komprimiert 7z;
 application / x-bb-appworld BBAW;
 application / x-Bittorrent Torrent;
 application / x-Chrom-Erweiterung CRX;
 application / x-Kakao CCO;
 application / x-java-Archiv-diff jardiff;
 application / x-java-jnlp-Datei jnlp;
 application / x-makeself Lauf;
 application / x-Oper-Erweiterung Oex;
 application / x-perl pl Uhr;
 application / x-Pilot pdb PRC;
 application / x-rar-komprimierte rar;
 application / x-redhat-Paket-Manager rpm;
 application / x-Meer Meer;
 application / x-shockwave-flash swf;
 application / x-stuffit sitzen;
 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 Reißverschluss;
 text / css css;
 text / html htm html shtml;
 text / mathml MML;
 text / plain txt;
 text / V-Card vcard VCF;
 text / vnd.rim.location.xloc XLoc;
 text / vnd.sun.j2me.app-Beschreiber jad;
 text / vnd.wap.wml WML;
 text / VTT VTT;
 text / x-Komponente Htc;
 }

Dann Nginx neu starten: nginx -s reload.

Via matovsky.com & Wiki