Ist es möglich zu erkennen, wenn ein Browser eine Fallback-Schriftart anstelle der in der CSS angegebenen verwendet?

Question

Wenn ein Zeichen in ein Textfeld eingegeben wird und die aktuell verwendete Schriftart dieses Zeichen nicht unterstützt, wird eine Ersatzschrift für dieses Zeichen verwendet. Ist es möglich, über Javascript oder andere Mittel zu informieren, wenn dies geschieht? Versuchen, ein Skript zu erstellen, das den Benutzer warnt, wenn ein bestimmtes Zeichen von der Schriftart nicht unterstützt wird. Danke für Ihre Hilfe!

Answer 1

Das klingt wie ein Job für so etwas wie fontkit.js oder opentype.js oder sogar Font.js, die alle Schriftarten für Glyph-Unterstützung testen können. Systemfonts werden auf diese Weise nicht behandelt (Font.js funktioniert möglicherweise, es wird wahrscheinlich eine Breite von 0 für das getestete Glyph angegeben), aber dann sind dies in der Regel die "websicheren" Fonts, von denen wir bereits genau wissen, welche Glyphen unterstützt werden jeder benutzt die gleichen. Zum Testen von "Löchern" in einer benutzerdefinierten Schriftart sollte jedoch jeder der zuvor genannten drei Schritte das ausführen, was Sie implementieren wollten.

Answer 2

Wenn Sie die Breite des Zeichens in der Schriftart überprüfen und es mit dem Fallback vergleichen, können Sie ableiten, ob es die Fallback-Schriftart verwendet. Dieser Test ist wahrscheinlich nicht 100% zuverlässig, aber man kann so etwas tun:

var text = $(".main-text").html(); 
 
var chars = text.split(""); 
 
for(var i = 0, len = chars.length; i < len; i++){ 
 
\t var str = chars[i]; str+=str;str+=str;str+=str; 
 
\t $("#test1, #test2").html(str); 
 
\t var w1 = $("#test1").width(); 
 
\t var w2 = $("#test2").width(); 
 
\t if(w1 == w2 && w1 != 0){ 
 
\t \t alert("char not supported " + chars[i]); 
 
\t } 
 
}

.main-text { 
 
    width: 50%; 
 
    height: 300px; 
 
    font-family: Impact, sans-serif; 
 
    font-size: 16px; 
 
} 
 
#test1, #test2 { 
 
    position: fixed; 
 
    top: -100px; 
 
    font-size: 16px; 
 
} 
 
#test1 { 
 
    font-family: Impact, sans-serif; 
 
} 
 
#test2 { 
 
    font-family: sans-serif; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea class="main-text"> 
 
Serif Font 
 
This E is not supported: ể 
 
</textarea> 
 
<span id="test1"></span> 
 
<span id="test2"></span>

jsfiddle