Wie kann ich mithilfe von @font-face erkennen, wann eine benutzerdefinierte Schriftart geladen wurde?

Wie erkennt man das Laden einer benutzerdefinierten Schriftart (@font-face)?

Beim Einbinden benutzerdefinierter Schriftarten mithilfe von @font-face In der Regel ist es wichtig festzustellen, wann die Schriftartdateien erfolgreich geladen wurden. Ohne dieses Wissen kann es vorkommen, dass Platzhalterzeichen (z. B. „“) angezeigt werden, bis die Schriftarten verfügbar sind.

Lösung: jQuery FontSpy.js

Eine beliebte Lösung ist das jQuery FontSpy.js-Plugin, mit dem Sie Elemente basierend auf der benutzerdefinierten Schriftart formatieren können geladen.

Implementierung

Um FontSpy.js zu verwenden, folgen Sie diesen Schritten:

1. Fügen Sie die ein JavaScript-Datei des Plugins in Ihrem Projekt.


2. Wenden Sie die an Die Funktion „fontSpy“ für die Elemente, die die benutzerdefinierte Schriftart anzeigen.


3. Konfigurieren Sie Optionen wie die Klassen „onLoad“ und „onFail“, die angewendet werden sollen, wenn die Schriftart geladen wird bzw. nicht geladen werden kann.
   

Das Plugin vergleicht die Breite einer Zeichenfolge, die in zwei verschiedenen Schriftarten angezeigt wird. Wenn sich die Breiten unterscheiden, bedeutet dies, dass die benutzerdefinierte Schriftart erfolgreich geladen wurde.

Codebeispiel

Beachten Sie den folgenden Codeausschnitt, der FontSpy.js auf ein Element mit dem anwendet Klasse my-icons:

<br>$(document).ready(function() {<br> $('.my-icons').fontSpy({</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">onLoad: 'show-icons',
onFail: 'hide-icons'