javascript - 如何检查字体是否有符号

Question

我的文档中有以下 css 规则

font-family: "Trebuchet MS", Tahoma;

但我发现有些浏览器有Trebuchet MS字体
没有我需要的符号(一些非拉丁字符的语言)。
在这种情况下，浏览器显示方 block 而不是符号。

我如何检查它(可能通过 javascript)？
(即如何检查
中是否缺少某些符号访问者浏览器中安装的字体)

Answer 1

在 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">
       &#xFFFD;test&#x25a1;&#x25AF;&#x1F618;&#x1F605;
       &#x1F617;&#x1F60E;&#x1F60E;&#x1F30A;&#x1F30A;&#x1F600;
    </div>

现在您可以测试单个 unicode 字符，方法是将其放入带有 display: inline-block 的 div 以强制最小宽度。

如果字形不在字体列表中，则将使用最后一个字体的 notdef 字形，宽度为 100pt，可以在 javascript 中从 div 的 offsetWidth 中检测到。

我对这个想法进行了足够的探索以验证它很可能会起作用，但我没有足够的时间来实际编写工作代码，抱歉!

我希望该技术也适用于其他操作系统(除非浏览器以另一种字体呈现 .notdef 字符!)。

或者，您可以使用零宽度字体，例如 Adobe blank其中有一个零宽度的 .notdef 字符 0(AdobeBlank.otf 文件只有 20kb)。这可以检测到缺失的字形，因为包含缺失字形的 div 将以 offsetWidth == 0 结束。但是我认为这比使用非常宽的字形更不可靠，因为存在宽度为零的有效字形，所以它对于有效的零宽度字形(特别是 U+200B 和其他控制字符？)，我们会得到误报。