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

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

Barbara Streisand
Freigeben: 2024-12-29 03:38:11
Original
740 Leute haben es durchsucht

How Can We Detect When CSS `@font-face` Fonts Have Loaded to Prevent Broken Icon Display?

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'
});
Nach dem Login kopieren
  1. 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 */
}
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage