如何检查字体是否有符号

时间:2012-01-25 15:47:30

标签: javascript html css fonts

我的文档中有以下css规则

font-family: "Trebuchet MS", Tahoma;

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

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

3 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:2)

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

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

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

答案 2 :(得分: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>

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

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

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

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

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