Wie man Google Schriftarten asynchron mit Font Face Observer lädt

Nachdem ich this article über die besten Möglichkeiten gelesen habe, Web-Schriftarten zu bedienen, wollte ich die neueste Javascript-Bibliothek Font Face Observer verwenden, um Google-Schriftarten asynchron auf meiner Website zu laden.Wie man Google Schriftarten asynchron mit Font Face Observer lädt

Die documentation liest, dass "Schriften von [...] einem Font-Service wie Google Fonts geliefert werden können", aber es zeigt keine Beispiele, wie dies tatsächlich zu implementieren ist. Ich habe die empfohlenen Artikel über den Font Face Observer gelesen, die auf der official website aufgeführt sind, aber alle von ihnen zeigten, wie man es mit selbst gehosteten Schriftarten verwendet.

Hat jemand den Font Face Observer benutzt, um Google Fonts zu laden? Oder könnten Sie mir auf eine Dokumentation hinweisen, die zeigt, wie Sie damit umgehen können?

Quelle

2016-06-20 Willege

Ich verstehe nicht, warum es sich nennt * loader *. Der Browser lädt die Schriftarten. Soweit ich sehen kann, sagt es nur, wenn sie geladen sind. –

@ T.J.Crowder Es hat eine '.load()' Methode. Es sagt Ihnen auch, wann die Schriftart geladen wurde und ändert die Klassen in Ihren Fließtext, um FOIT zu vermeiden. Ist der Font-Lader von Google/Typekit nach wie vor der beste asynchrone Weg, Schriften zu laden? – Willege

Ja, sah die 'load' Methode, die sie im Beispiel auf der Titelseite verwenden, aber das CSS auf der Titelseite wird die Schriftart * auf jeden Fall laden *, also habe ich keine Ahnung was 'load' zu tun ist. Der beste Weg: Ich bin nicht qualifiziert, darüber eine Meinung zu geben. Aber ... Schriftarten werden asynchron * standardmäßig geladen *. Ich habe noch nicht das Bedürfnis verspürt, den Prozess zu kontrollieren. Natürlich tun es die Leute, also muss es Anwendungsfälle geben. –

Dies ist eine ziemlich einfache Art, wie ich es benutzt habe, obwohl ich nicht sicher bin, ob es der beste Weg ist. Der Grund dafür ist, dass das Laden der Schriftart das Rendern nicht blockiert, da ich das Skript am Ende in meiner JS-Datei habe. Also im Grunde fange ich an, die Schriftart zu laden, sobald meine JS-Datei zu parsen beginnt und sie wird gerendert, sobald sie geladen ist.

import FontFaceObserver from 'fontfaceobserver' 
import loadCSS from './util/loadCSS' 

loadCSS('//fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700') 
const opensans = new FontFaceObserver('Open Sans') 
opensans.load().then(() => document.body.classList.add('fonts--loaded'))

Quelle

2016-09-27 05:39:56 thesublimeobject

Wie man Google Schriftarten asynchron mit Font Face Observer lädt

Antwort

Verwandte Themen