Glücklicherweise haben wir heutzutage viel mehr Kontrolle über das Laden von Schriftarten. Wir müssen unsere Benutzer nicht mehr zwingen, auf das Laden einer Schriftart zu warten, bevor wir ihnen Text anzeigen. Wir können sie austauschen, während die Schriftart geladen wird. Aber dieser Austausch kann visuell holprig sein, mit vielen abrupten Umbrüchen und Neuanordnungen. Aber das können wir beheben!
Wenn Sie benutzerdefinierte Schriftarten im Web laden, ist ein verantwortungsbewusster Weg, sicherzustellen, dass die Deklaration @font-face die Eigenschaft font-display mit einem Wert wie swap oder optional verwendet.
@font-face {
font-family: 'MyWebFont'; /* Define the custom font name */
src: url('myfont.woff2') format('woff2'); /* Define where the font can be downloaded */
font-display: swap; /* Define how the browser behaves during download */
}Wenn dies vorhanden ist, gibt es *keine Verzögerung* für einen Benutzer, der Ihre Seite lädt, bevor er Text sieht. Das ist großartig für die Leistung. Aber es hat einen Design-Kompromiss: Der Benutzer wird FOUT oder „Flash of Unstyled Text“ sehen. Das bedeutet, sie werden sehen, wie die Seite mit einer Schriftart lädt, die Schriftart geladen wird, und dann wird die Seite diese Schriftart gegen die neue austauschen, was zu einer gewissen visuellen Störung und wahrscheinlich einer leichten Neuanordnung führt.
Bei diesem Trick geht es darum, diese Störung und Neuanordnung zu *minimieren*!
Dieser Trick stammt von Glen Maddern, der darüber einen Screencast veröffentlicht hat bei Front End Center, der Monica Dinculescus Font Style Matcher in Kombination mit Bram Steins Font Face Observer-Bibliothek verwendet.
Nehmen wir an, Sie laden eine Schriftart von Google Fonts. Hier verwende ich Rubik in zwei Schriftschnitten
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;900&display=swap");Am Ende dieser URL sehen Sie standardmäßig &display=swap, und so stellen sie sicher, dass font-display: swap; in der @font-face-Deklaration enthalten ist.
Bei einer langsamen Verbindung wird eine einfache Seite mit Text so geladen
Sehen Sie den **Swap**? Denken Sie daran, dass das auf eine Weise *gut* ist, denn zumindest ist der Text zunächst sichtbar. Aber der Austausch ist ziemlich grobschlächtig. Es fühlt sich visuell störend an.
Vor dem ersten Render der Seite.
Die Seite wird mit Fallback-Schriftarten gerendert, während die benutzerdefinierte Schriftart geladen wird. font-display: swap hat eine „extrem kurze Blockierungszeit“, daher werden Sie fast sicher den Austausch erleben (FOUT), es sei denn, die Schriftart befindet sich im Browser-Cache.
Sobald die benutzerdefinierte Schriftart geladen ist, wird die Seite neu gerendert, was zu Neuanordnungen und visuellen Sprüngen führt. Es sei denn, wir beheben das!
Lassen Sie uns das beheben.
Mit dem Font Style Matcher-Tool können wir die beiden Schriftarten übereinander legen und sehen, wie unterschiedlich Rubik und die Fallback-Schriftart sind.
Beachten Sie, dass ich hier system-ui als Fallback-Schriftart verwende. Sie sollten eine klassische „web-sichere“ Schriftart als Fallback verwenden, wie z. B. Georgia, Times New Roman, Arial, Tahoma, Verdana usw. Die überwiegende Mehrheit der Computer hat diese standardmäßig installiert, daher sind sie sichere Fallbacks.
In unserem Fall haben diese beiden Schriftarten bereits eine praktisch identische „x-Höhe“ (beachten Sie die Höhe der roten und schwarzen Kleinbuchstaben oben). Wenn sie das nicht hätten, müssten wir die Schriftgröße und Zeilenhöhe anpassen, um sie anzupassen. Aber zum Glück für uns reicht eine Anpassung des Buchstabenabstands aus, um sie sehr nahe zu bringen.
Die Anpassung des Rückrufs auf die Verwendung von letter-spacing: 0.55px; bringt sie beim Größenverhältnis sehr nahe!
Nun besteht der Trick darin, uns die Möglichkeit zu geben, diese Formatierung *nur anzuwenden, bevor die Schriftart geladen wird*. Machen wir es also zum Standardstil und fügen dann eine Body-Klasse hinzu, die uns mitteilt, dass die Schriftart geladen wurde, und die Anpassungen entfernt.
body {
font-family: "Rubik", system-ui, sans-serif;
letter-spacing: 0.55px;
}
body.font-loaded {
letter-spacing: 0px;
}Aber wie bekommt man diese font-loaded-Klasse? Die Font Face Observer-Bibliothek macht es sehr einfach und browserübergreifend freundlich. Mit dieser Bibliothek sind es nur wenige Zeilen JavaScript, um die Klasse anzupassen.
const font = new FontFaceObserver("Rubik", {
weight: 400
});
font.load().then(function() {
document.body.classList.add("font-loaded");
});Sehen Sie jetzt, wie viel reibungsloser und weniger störend die Erfahrung beim Laden von Schriftarten ist
Dies sind die Zustände „erste Darstellung“ und „nachdem die Schriftart geladen wurde“ übereinander. Im Header sehen Sie, wie sich der grün getönte/mit Schriftart geladene Header ziemlich stark bewegt. Das könnten wir beheben. Aber wichtiger ist, dass der Textkörper überhaupt nicht viel neu angeordnet wird. Es verursacht einen kleinen merklichen Austausch, aber alle Zeilen und Platzierungen bleiben gleich, sodass niemand den Anschluss verliert.
Das ist ein *wirklich* toller Trick!
Hier ist die minimale Demo
Beim Testen, wenn Sie den Austausch überhaupt nicht sehen können, überprüfen Sie, ob Rubik bereits auf Ihrem Computer installiert ist. Oder Ihr Internet ist vielleicht einfach zu schnell! DevTools können Ihnen helfen, Ihre Verbindung für Tests zu drosseln.
Dies kann komplexer werden, wenn Sie mehrere Schriftarten und mehrere Schriftschnitte verwenden. Sie können das Laden jeder einzelnen verfolgen und verschiedene Klassen anpassen, während sie geladen werden, und Stile anpassen, um sicherzustellen, dass sich die Dinge so wenig wie möglich neu anordnen.