Wir nehmen Web-Schriften heutzutage als selbstverständlich an. Wir hatten nicht immer die Möglichkeit, unseren Text in fast jeder Schriftart zu setzen. Ich meine, wir könnten es, aber dann müssten wir seufzen und sagen: "Nun, das wird auf etwa fünf Computern gut aussehen. Ich hoffe, alle anderen mögen Verdana! "
Web-Fonts brachten dem Gesehenen einige dringend benötigte Abwechslung, einige Missbräuche der Typografie, ein zusätzliches Seitengewicht, da die Fonts selbst geladen waren, und Blitze von unbemanntem oder unsichtbarem Text. Nun ... Omelett, Eier, brechen, Sie bekommen die Idee. Es musste passieren.
Wenn Nutzer zu lange auf eine leere Seite schauen, entscheiden sie sich vielleicht zu gehen
Es ist jedoch ein kleines Usability-Problem, wenn Text unsichtbar ist, bis die benutzerdefinierte Schriftart geladen wird. Wenn Benutzer zu lange auf eine leere Seite schauen (und zu lange Millisekunden), entscheiden sie sich vielleicht einfach zu gehen. Und das ist fair genug. Es ist nicht benutzerfreundlich.
Ein paar Jahre später, und wir machen Fortschritte bei der Steuerung der Art und Weise, wie Schriften geladen werden. Bis jetzt haben wir es mit Bibliotheken und APIs von Drittanbietern gemacht. Aber nun kommt diese Funktionalität endlich zu CSS.
Geben Sie die Schriftart-Anzeige- Eigenschaft ein. Es ist derzeit nur in Opera, Opera für Android und Chrome. (Es wurde zuerst in Chrome 49 als experimentelles Feature eingeführt.)
Es kommt mit vier Optionen: Auto , Swap , Fallback und optional .
Wenn Sie font-display: auto wählen, bleibt der Browser so, wie er es jetzt tut. Text wird unsichtbar sein, bis die benutzerdefinierte Schriftart geladen wird.
Swap ist wahrscheinlich das, was die meisten Leute benutzen werden. Wenn die Schriftart nicht geladen ist, wird die nächste verfügbare Schriftart verwendet, die in der Eigenschaft font-family definiert ist. Wenn die Webschrift geladen wird, wird sie ersetzt. Dies ist im Grunde ein Blitz von unsterblichen Inhalten, aber das ist benutzerfreundlicher als unsichtbarer Inhalt, denke ich.
Fallback teilt den Unterschied zwischen diesen beiden ersten Optionen auf. Bei einer Verzögerung von 100 Millisekunden ist der Text unsichtbar. Wenn die benutzerdefinierte Schriftart bis dahin geladen ist, wird sie verwendet. Ist dies nicht der Fall, wird die nächste Schriftart in der Folge so lange festgelegt, bis die benutzerdefinierte Schriftart geladen wird.
Optionale Funktionen wie Fallback, außer dass der Browser entscheidet, die benutzerdefinierte Schriftart überhaupt nicht zu laden, wenn die Verbindung des Benutzers zu langsam ist
Optionale Funktionen wie Fallback, außer dass der Browser entscheidet, die benutzerdefinierte Schriftart überhaupt nicht zu laden, wenn die Verbindung des Benutzers zu langsam ist.
Und da haben wir es. declaration. Wohlgemerkt, die Display-Schriftart soll in einer @ Font-Face- Deklaration verwendet werden. Das bedeutet, dass es vorerst nicht mit Drittanbieter-Schriftarten wie Typekit oder Google Fonts funktioniert. Sobald die Font-Anzeige jedoch weiter verbreitet ist, werden sie wahrscheinlich eine Art Option für diese Funktion implementieren.