我的文档中有以下 css 规则
font-family: "Trebuchet MS", Tahoma;
但我发现有些浏览器有Trebuchet MS字体
没有我需要的符号(一些非拉丁字符的语言)。
在这种情况下,浏览器显示方 block 而不是符号。
我如何检查它(可能通过 javascript)?
(即如何检查
中是否缺少某些符号
访问者浏览器中安装的字体)
最佳答案
在 Windows 上,您可以通过 JavaScript 检测字体中缺少哪些字符:
a) 创建一个包含非常宽的 notdef character 的设计器检测器字体比如说 100pt 宽。检测器字体需要是比例字体,构造类似于 Adobe notdef字体 AND-Regular.otf
。 (this link 也可能相关?)。
b) 使用检测字体作为后备字体(这里我使用 adobe notdef
作为检测字体)例如
<div style="font-family: sans-serif, Segoe UI symbol, adobe notdef">
�test□▯😘😅
😗😎😎🌊🌊😀
</div>
现在您可以测试单个 unicode 字符,方法是将其放入带有 display: inline-block
的 div 以强制最小宽度。
如果字形不在字体列表中,则将使用最后一个字体的 notdef 字形,宽度为 100pt,可以在 javascript 中从 div 的 offsetWidth 中检测到。
我对这个想法进行了足够的探索以验证它很可能会起作用,但我没有足够的时间来实际编写工作代码,抱歉!
我希望该技术也适用于其他操作系统(除非浏览器以另一种字体呈现 .notdef
字符!)。
或者,您可以使用零宽度字体,例如 Adobe blank其中有一个零宽度的 .notdef
字符 0(AdobeBlank.otf
文件只有 20kb)。这可以检测到缺失的字形,因为包含缺失字形的 div 将以 offsetWidth == 0 结束。但是我认为这比使用非常宽的字形更不可靠,因为存在宽度为零的有效字形,所以它对于有效的零宽度字形(特别是 U+200B
和其他控制字符?),我们会得到误报。
关于javascript - 如何检查字体是否有符号,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9005580/