Можно ли обнаружить, когда браузер использует резервный шрифт вместо основного, указанного в CSS?

Если символ вводится в текстовое поле, а используемый в данный момент шрифт не поддерживает этот символ, для этого символа используется шрифт резервного копирования. Можно ли рассказать через Javascript или какие-то другие способы, когда это происходит? Попытка создать script, который предупреждает пользователя, если определенный символ не поддерживается шрифтом. Спасибо за вашу помощь!

Ответ 1

Это звучит как работа для чего-то вроде fontkit.js или opentype.js или даже Font.js, все из которых могут протестировать шрифты для поддержки глифов. Системные шрифты не покрываются таким образом (Font.js может работать, вероятно, сообщит ширину 0 для проверенного глифа), но тогда это, как правило, "веб-безопасные" шрифты, из которых мы уже точно знаем, какие глифы поддерживаются, все используют одни и те же. Однако для тестирования "дыр" в пользовательском шрифте любой из вышеупомянутых трех уже должен выполнять то, что вы намеревались реализовать.

Ответ 2

Проверяя ширину символа в шрифте и сравнивая его с резервным, вы можете сделать вывод, если он использует резервный шрифт. Этот тест, вероятно, не на 100% надежный, но вы можете сделать что-то вроде:

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>