Question

我的文档中有以下css规则

font-family: "Trebuchet MS", Tahoma;

但我发现有些浏览器有Trebuchet MS字体
没有符号我需要（某些语言与非拉丁字符）在这种情况下，浏览器显示正方形而不是符号。

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

Answer 1

据我所知，您无法检查单个符号，但可以检查编码。

Answer 2

如果主要字体缺少字符的字形，则正确行为的浏览器会从辅助字体中获取字形。但是，众所周知，浏览器，特别是IE，会经常出错。

最好的方法是，只有在已知字体包含可能出现在元素内容中的所有字符时，才在font-family列表中包含字体。虽然字体在同一名称下以不同版本存在，但我们通常可以非常可靠地找出字体是否包含某些给定字符。

对于一小段文本，您可以将文本复制到记事本中，设置字体Trebuchet MS，并检查一切正常。（记事本在这里很好，因为它不进行字体替换。）

Answer 3

在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>

现在，您可以通过使用display: inline-block将其放入div以强制最小宽度来测试单个Unicode字符。

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

我对这个想法进行了充分的探索，以验证它很可能可行，但是我没有足够的时间来实际编写工作代码，对不起！

我希望该技术也可以在其他操作系统上使用（除非浏览器以另一种字体呈现.notdef字符！）。

或者，您可以使用零宽度字体（如Adobe blank），其宽度为零的.notdef字符0（AdobeBlank.otf文件仅为20kb）。这可能会检测到丢失的字形，因为包含丢失的字形的div最终将以offsetWidth == 0结束。但是，我认为这比使用非常宽的字形的可靠性更低，因为存在有效宽度为零的字形，因此它对于有效的零宽度字形（特别是U+200B以及其他控制字符？），would会得到误报。

如何检查字体是否有符号

3 个答案: