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>
<pre class="brush:php;toolbar:false">onLoad: 'show-icons',
onFail: 'hide-icons'

});
});

Einmal Nachdem die benutzerdefinierte Schriftart geladen wurde, wird die Klasse „show-icons“ auf das Element angewendet, wodurch die Symbole sichtbar werden. Wenn die Schriftart nicht geladen werden kann, wird stattdessen die Klasse „hide-icons“ angewendet.

Zusätzliche Überlegungen

• Fallback-Schriftart: Angeben eine Fallback-Schriftart in der FontSpy-Konfiguration, die angezeigt wird, falls die benutzerdefinierte Schriftart fehlschlägt laden.
• Timeout: FontSpy.js enthält einen Timeout-Mechanismus, um unendliches Warten zu verhindern. Konfigurieren Sie die TimeOut-Option, um mögliche Verzögerungen zu vermeiden.
• Browser-Unterstützung: FontSpy.js unterstützt moderne Browser, einschließlich Chrome, Firefox, Safari und Edge.
• Ursprungsübergreifende Schriftarten: FontSpy.js übernimmt das Laden ursprungsübergreifender Schriftarten nahtlos.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von @font-face erkennen, wann eine benutzerdefinierte Schriftart geladen wurde?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!