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

Question

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

Answer 1

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

Answer 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>

jsfiddle