是否可以检测浏览器何时使用后备字体而不是 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