È possibile rilevare quando un browser utilizza un font di fallback anziché quello primario specificato nel CSS?

Question

Se un carattere viene inserito in un campo di testo e il carattere attualmente applicato non supporta quel carattere, per quel carattere viene usato un carattere di backup. È possibile dire via Javascript o altri mezzi quando questo sta accadendo? Cercando di creare uno script che avvisi l'utente se un determinato carattere non è supportato dal carattere. Grazie per l'aiuto!

Answer 1

questo suona come un lavoro per qualcosa come fontkit.js o opentype.js, o anche Font.js, ognuno dei quali può testare i font per il supporto glifo. I font di sistema non sono trattati in questo modo (Font.js potrebbe funzionare, probabilmente riporterà una larghezza 0 per il glifo testato) ma in genere si tratta dei caratteri "sicuri per il Web", di cui sappiamo già esattamente quali glifi sono supportati perché tutti usano gli stessi Per testare "buchi" in un font personalizzato, tuttavia, ognuno dei tre precedentemente citati dovrebbe già fare ciò che si intendeva implementare.

Answer 2

Controllando la larghezza del carattere nel carattere e confrontandolo con il fallback, è possibile dedurre se sta utilizzando il carattere di fallback. Questo test è probabilmente non affidabile al 100%, ma si può fare qualcosa di simile:

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