是否可以检测浏览器何时使用后备字体而不是 CSS 中指定的主要字体？

Question

如果在文本字段中输入了一个字符，而当前应用的字体不支持该字符，则会为该字符使用备用字体。是否可以通过 Javascript 或其他方式告知何时发生这种情况？尝试创建一个脚本，在字体不支持某个字符时提醒用户。感谢您的帮助！

Answer 1

这听起来像是 fontkit.js or opentype.js, or even Font.js 之类的工作，所有这些都可以测试字形支持的字体。系统字体不以这种方式涵盖（Font.js 可能有效，它可能会报告测试字形的宽度为 0），但这些通常是 "web safe" 字体，我们已经确切知道哪些字形得到支持，因为每个人都使用相同的。不过，为了在自定义字体中测试 "holes"，前面提到的三种字体中的任何一种都应该已经完成了您打算实现的操作。

Answer 2

查看字体中字符的宽度，并与fallback比较，可以推断是否使用了fallback字体。此测试可能不是 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

是否可以检测浏览器何时使用后备字体而不是 CSS 中指定的主要字体？

Is it possible to detect when a browser is using a fallback font instead of the primary one specified in the CSS?

javascript

css

fonts

webfonts