Hey hey `font-Anzeige”

0
24

Y ‘ all wissen über Schrift-display? Es ist ziemlich toll. Es ist eine CSS-Eigenschaft, die Sie verwenden können innerhalb der @font-face-blocks zu Steuern, wie, visuell, die Schrift lädt. Schriftart laden ist wirklich verdammt kompliziert. Hier ist eine Anleitung von Zach Leatherman, um es zu beweisen, mit mehr als 10 font-loading-Strategien, einschließlich der Strategien, die kritischen inline-CSS von Teilmengen von Schriftarten kombiniert mit dem laden der rest der Schriften später durch JavaScript. Es ist kein Spaziergang im park.

Schriftart-Anzeige ist ein bisschen wie ein Spaziergang im park, obwohl. Es ist nur eine einzige Zeile CSS. Es muss nicht alles lösen, dass Zach exotische demos tun, aber es kann gehen einen langen Weg mit einer Linie. Es ist bemerkenswert zu bringen, die jetzt als Unterstützung hat sich einiges verbessert in letzter Zeit. Es ist jetzt in Firefox 58+, Chrom 60+, Safari 11.1+, iOS 11.3+ und Chrome auf Android 64+. Ziemlich gut.

Was haben Sie von ihm bekommen? Die Fähigkeit zu kontrollieren, FOUT und FOIT wie ist die richtige für Ihr Projekt, zwei Dinge, die beide irgendwie saugen in Bezug auf schriftart laden. Wir haben ein paar stellen, auf die es etwa hier:

  • schriftart-Anzeige für die Massen von Jeremy Wagner
  • Wenn Sie wirklich nicht mögen FOUT, schriftart-Anzeige: optional könnte Ihre jam von mir

Erinnerung:

FOUT = Flash of Unstyled Text
FOIT = Flash Unsichtbaren Text

Weder ist groß. In einer perfekten Welt, unsere benutzerdefinierte Schriftarten, die nur zeigen, bis sofort. Aber da es nicht eine praktische Möglichkeit, wählen wir basierend auf unseren Prioritäten.

Die beste Quelle über ihn ist Monica Dinculescu die Erklärer Seite:

würd ich fasse diese Werte Entscheidungen wie diese:

  • Wenn Sie OK sind, mit FOUT, sind Sie wahrscheinlich am besten aus, mit Schrift-Anzeige: swap; zeigt eine fallback-schriftart ziemlich schnell, aber tauschen Sie Ihre eigene schriftart, wenn es lädt.
  • Wenn Sie OK sind, mit FOIT, sind Sie wahrscheinlich am besten aus, mit Schrift-Anzeige: blockieren; dies ist ähnlich wie aktuelle browser-Verhalten, wo es zeigt nichts als wartet er darauf, dass die benutzerdefinierte schriftart, aber irgendwann fallen Sie zurück.
  • Wenn Sie nur wollen, dass die benutzerdefinierte schriftart zu zeigen, überhaupt, wenn Sie es sofort, schriftart-Anzeige: optional; ist, was Sie wollen. Es wird immer noch geladen, in den hintergrund und werden es in der nächsten laden der Seite wohl.

Diejenigen sind einige ziemlich anständige Optionen für eine einzelne Zeile CSS. Aber wieder, denken Sie daran, wenn Sie einen großen text-schwere-Website mit benutzerdefinierten Schriftarten, Zach ‘ s guide kann Ihnen helfen, mehr tun.

Ich würde fast gehen auf ein Glied und sagen: jede @font-face-block gibt, sollte eine schriftart-Eigenschaft display. Mit dem einzigen VORBEHALT, dass Sie tun etwas exotisch und aus irgendeinem Grund wollen die browser-Standard-Verhalten.

Willst du etwas hören, ganz unglücklich? Wir bereits erwähnt schriftart-display: block;. Würden Sie nicht denken, es, äh, gut, blockiert das Rendern von text, bis Sie die benutzerdefinierte schriftart geladen? Tut es das nicht. Es ist immer noch eine swap-Zeitraum. Es wäre die perfekte Sache, für so etwas wie Symbol-fonts, wo das Symbol (wahrscheinlich) hat keine Bedeutung, es sei denn, die benutzerdefinierte schriftart geladen. Ach, es gibt keine Schrift-display-Lösung.

Und, hey Mann, wäre es nicht schön, wenn die Google-Schriftarten erlaubt uns, es zu benutzen?