Nicht nur das kopieren der @font-face von Google Fonts-URLs

0
37

Ich glaube nicht, dass dies ist eine Epidemie oder etwas, aber ich habe gesehen es ein paar mal gemacht und sogar befürwortet. Dies ist, was ich meine…

Sie gehen Sie zu Google-Fonts und wählen Sie eine schriftart wie Open Sans, und es gibt entweder eine <link> – oder ein @import mit einer URL, in dem bereit, diese Schrift für die Verwendung auf Ihrer Website.

Nehmen Sie einen Blick in und sehen, was es gibt…

Es ist nur eine @font-face-Deklarationen, natürlich!

Jetzt ist Ihre performance-orientierten Gehirn startet. Warten. So, ich mache eine HTTP-Anforderung für das stylesheet, und dann macht es mehr HTTP-requests für diejenigen, woff2-Dateien, es ist zu verknüpfen. Schrauben Sie die Mitte der Mensch hier, warum nicht einfach kopieren Sie die @font-face-blocks rechts von hier und nutzen Sie.

Sie können! Aber!

Das Problem ist, dass Google macht Lust auf Google, die Dinge hier und der Inhalt des original-stylesheet-änderungen basierend auf der browser anzufordern. Das screenshot oben ist Chrom 66. Hier ist Firefox 20 unter Windows 7:

Es ist anders! Es ist nur noch woff, nicht woff2. Wenn wir uns öffnen, dass die URL im IE 8, würden wir bekommen eine @font-face-block, enthält das eot-format!

Der Punkt ist, was, die URL gibt, ist sehr spezifisch, was die aktuellen browser benötigt. Das ist eine ziemlich Coole Sache, zu abstrahieren und sich keine sorgen darüber. Sollten die neuen Browser haben neue Formate und neue CSS-syntax benötigt, dann kommen Sie einfach entlang für die Fahrt.

Nicht, dass Google Fonts ist perfekt mit diesem Zeug. Zum Beispiel, indem Sie nicht die Steuerung Ihres eigenen @font-face-blocks, die Sie nicht nutzen können Schrift-display, das ist eine Schande. Vielleicht bekommen wir eines Tages, oder vielleicht, es lohnt sich selbst-hosting Ihrem Google-Fonts, das ist eine ganze Sache, wir werden eines Tages.

Das Jetpack WordPress-plugin läuft auf dieser Website, indem Sie nicht nur die verwandten Beiträge unten, aber die Sicherheit und backups, Markdown-support, site-Suche, Kommentar-Formularen, social-network-verbindungen und vieles mehr!