我正在尝试编写一些JavaScript，以检测Unicode字符是否已在浏览器中呈现。
注意-之前曾问过此问题或类似问题，但没有一个人回答过实际问题。要么选择的答案不适用于每个unicode字符，要么选择的答案以不同的方式解决了发问者的问题。 例如安装具有您要使用的Unicode字符的字体。
我遇到过几种解决此问题的方法。我认为它们都不适合所有可能的情况，也不是特别优雅的解决方案。
- HTMLCanvas
在canvas元素中呈现unicode字符，并将其与所有现有的后备字形进行比较，例如 �或▯等...
如果它与那些字符中的任何一个匹配，则说明它没有正确显示。
此解决方案的问题是它需要知道所有这些后备字符是什么，这基本上是不可能的。如果您测试“▯”之类的字符，也会显示错误的否定结果
- 为每个代码点使用具有空白，零宽度字符的后备字体
使用以下CSS渲染Unicode字符，如果该字符没有宽度，则说明它无法正确渲染。
@font-face {
font-family: 'Blank';
src:url('~assets/fonts/blankfont.ttf') format('truetype');
}
.testfont {
font-family:
-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,serif...
... every possible font that it could render in by default...
"Blank"
}
这种方法的主要问题是知道角色可以渲染的所有可能的字体。我已经尝试过这种方法。我会两次渲染同一个Unicode字符，一次是使用上述CSS，一次是不使用CSS。
我发现Unicode字符有时在没有CSS的情况下可以正确呈现，而在CSS的情况下呈现为空白。这表明我的系统上还有更多的后备字体，这些字体不属于serif，sans-serif和其他通用CSS字体系列。
因此，您必须添加所有可能的字体，然后才能变回“空白”字体。
这两种方法在大多数情况下都可能需要大量的修补工作。但我正在寻找一种始终有效的方法。
任何帮助将不胜感激。如果找到解决方案，请确保将其发布在这里。