Bir tarayıcının CSS'de belirtilen birincil yerine bir yedek yazı tipi kullandığını algılamak mümkün mü?

Question

Bir metin alanına bir karakter girilirse ve o anda uygulanmış font bu karakteri desteklemiyorsa, bu karakter için bir yedek yazı tipi kullanılır. Bu olduğunda Javascript veya başka yollarla söylemek mümkün mü? Belirli bir karakter font tarafından desteklenmiyorsa kullanıcıyı uyaran bir betik oluşturmaya çalışıyorum. Yardım ettiğin için teşekkür ederim!

Answer 1

fontkit.js veya opentype.js, hatta Font.js gibi bir şey için bir işe benzer, hepsi glif desteği için yazı tiplerini test edebilir. Sistem yazı tipleri bu şekilde ele alınmaz (Font.js işe yarayabilir, muhtemelen test edilen glif için 0 genişliğini rapor edecektir), ancak bunlar genellikle hangi web sitelerinin hangi gliflerin desteklendiğini bildiğimiz "web güvenli" fontlardır. herkes aynı olanları kullanır. Yine de, özel bir fontta "delikler" test etmek için, daha önce sözü edilen üçten herhangi birinin uygulamak istediğiniz şeyi yapması gerekir.

Answer 2

Yazı tipindeki karakterin genişliğini kontrol ederek ve geri dönüşle karşılaştırarak, geri dönüş yazı tipini kullanıyorsa, çıkabilirsiniz. Yani sadece gerçekten açık olmak

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