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:
Verwendung:
$('.bannerTextChecked').fontSpy({ onLoad: 'hideMe', onFail: 'fontFail anotherClass' });
Beispiel:
.hideMe { visibility: hidden !important; } .fontFail { visibility: visible !important; /* Style to resemble the custom font */ }
Zusätzliche Hinweise:
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!