Wie können wir erkennen, wann CSS-Schriftarten „@font-face' geladen wurden, um eine fehlerhafte Symbolanzeige zu verhindern?

Erkennen des Schriftartladestatus für CSS @font-face

Problem:
Beim Integrieren einer Schriftart mit @font-face, Symbole können zunächst als unformatierte Kreise mit ⓘ-Symbolen anstelle ihres beabsichtigten Designs erscheinen. Dieses Problem tritt auf, weil das Laden der Schriftartdateien einige Zeit in Anspruch nimmt.

Abfrage:
Wie können wir feststellen, ob die @font-face-Schriftartendateien geladen wurden, um eine ordnungsgemäße Symbolanzeige sicherzustellen?

Antwort:

jQuery-FontSpy.js Plugin:

Dieses Open-Source-Plugin erkennt den Ladestatus von Schriftarten, indem es die Breite einer in Comic Sans MS (einer weit verbreiteten Schriftart) gerenderten Zeichenfolge mit der gleichen Zeichenfolge vergleicht, die in der von Ihnen gewünschten benutzerdefinierten Schriftart gerendert wird laden. Wenn die Breiten unterschiedlich sind, wurde die benutzerdefinierte Schriftart erfolgreich geladen.

Anpassung:

• onLoad: Klasse hinzugefügt, wenn die Schriftart vorhanden ist geladen.
• onFail: Klasse hinzugefügt, wenn die Schriftart fehlschlägt laden.
• testFont: Eine weit verbreitete Schriftart wie „Comic Sans MS“.
• testString: Eine eindeutige Zeichenfolge, die für den Breitenvergleich verwendet wird.
• Verzögerung: Zeit zwischen der Schriftbreite prüft.
• TimeOut: Maximale Wartezeit, bevor ein Schriftfehler angenommen wird.

Verwendung:

1. Fügen Sie das jQuery-FontSpy.js-Plugin in Ihren HTML-Code ein.
2. Wenden Sie das an .bannerTextChecked Klasse für Elemente, deren Schriftladung Sie erkennen möchten.
3. Initialisieren Sie das Plugin:

$('.bannerTextChecked').fontSpy({
  onLoad: 'hideMe',
  onFail: 'fontFail anotherClass'
});

4. Definieren Sie benutzerdefinierte CSS-Klassen zur Steuerung Elementsichtbarkeit basierend auf dem Laden der Schriftart Status.

Beispiel:

.hideMe {
  visibility: hidden !important;
}

.fontFail {
  visibility: visible !important;
  /* Style to resemble the custom font */
}

Zusätzliche Hinweise:

• SchriftartAwesome Kompatibilität ist derzeit nicht unterstützt.
• Weitere Details und eine Live-Demo finden Sie unter: https://patrickmarabeas.github.io/jQuery-FontSpy.js

Das obige ist der detaillierte Inhalt vonWie können wir erkennen, wann CSS-Schriftarten „@font-face' geladen wurden, um eine fehlerhafte Symbolanzeige zu verhindern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!