javascript - ¿Es posible detectar cuándo un navegador está utilizando una fuente alternativa en lugar de la principal especificada en el CSS?

fonts webfonts

Question

Si se ingresa un carácter en un campo de texto y la fuente aplicada actualmente no es compatible con ese carácter, se usa una fuente de respaldo para ese carácter. ¿Es posible decir a través de Javascript o algún otro medio cuando esto está sucediendo? Intentar crear un script que alerta al usuario si la fuente no admite cierto carácter. ¡Gracias por tu ayuda!

Answer 1

Al verificar el ancho del carácter en la fuente y compararlo con el respaldo, puede inferir si está utilizando la fuente alternativa. Esta prueba probablemente no sea 100% confiable, pero puedes hacer algo como:

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

.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

Answer 2

Esto suena como un trabajo para algo como fontkit.js u opentype.js , o incluso Font.js , todos los cuales pueden probar las fuentes para el soporte de glifos. Las fuentes del sistema no están cubiertas de esta manera (Font.js podría funcionar, probablemente reportará un ancho 0 para el glifo probado), pero estas son típicamente las fuentes "seguras para la web", de las cuales ya sabemos exactamente qué glifos son compatibles porque Todos usan los mismos. Sin embargo, para probar "agujeros" en una fuente personalizada, cualquiera de los tres mencionados anteriormente ya debería hacer lo que pretendía implementar.