如何检查字体是否具有符号

Question

如何检查字体是否具有符号

8

我在文档中有以下CSS规则：

我在文档中有以下CSS规则

font-family: "Trebuchet MS", Tahoma;

但我发现一些浏览器使用没有我所需要符号（非拉丁字符）的Trebuchet MS字体。在这种情况下，浏览器将显示方块而不是符号。

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

- tsds

为什么不先检查访问者是否拥有所需的字体，然后再尝试检查该字体是否实际包含您需要的字符呢？ - Dan D.

如果我的访问者没有这种字体（Trebuchet MS），浏览器将使用第二个字体（Tahoma），一切都没问题，但是如果我的用户有Trebuchet MS但缺少所需的符号，则会显示方块。 - tsds

这个问题可以通过使用画布来呈现字形来解决（我没有标记为重复，因为其他答案不是很好）：https://dev59.com/rmvXa4cB1Zd3GeqPJoD1 - robocat

3个回答

3

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

- Rodrigo

编码没问题，我很确定。 - tsds

2

如果主要字体缺少某个字符的字形，正确行为的浏览器会从辅助字体中获取该字形。但是浏览器，特别是IE，经常会做错这件事。

最好的方法是仅在已知字体包含元素内容中可能出现的所有字符时，将字体包含在font-family列表中。尽管字体以相同名称的不同版本存在，但我们通常可以足够可靠地确定字体是否包含某些给定字符。

对于少量文本，您可以将文本复制到记事本中，设置Trebuchet MS字体，并检查一切是否正常。(记事本很好用，因为它不进行字体替换。)

- Jukka K. Korpela

这个问题只出现在我的几个访问者中，并且总是在Chrome浏览器中。 - tsds

那么问题出在哪里？是哪个字符，在哪种CSS设置下？URL是什么？ - Jukka K. Korpela

上述问题是 - Trebuchet MS字体中没有西里尔字母。 - tsds

我明白了，看起来一些旧版本的Trebuchet MS确实缺少Cyrillic字符。但我不认为有办法在JavaScript中检测到这一点。当我测试希伯来字母（即使在现代版本的Trebuchet MS中也没有包括）时，Chrome表现得非常好：<div style="font-family: Trebuchet MS, Tahoma">א</div>会按规格在Tahoma中显示alef。一些旧版本的Chrome可能会出错。无论如何，如果有机会使用的字体不包含您需要的所有字符，只需使用其他字体即可。 - Jukka K. Korpela

4

@JukkaK.Korpela，你这样轻描淡写地说，好像只是换一个字体就没什么了不起的！哦，但是对于一个设计师来说，这可是刻苦挑选、匹配和平衡其余设计元素的字体，白色空间精确计算，颜色精心挑选以反映出他所选择的字体自然颜色所唤起的情绪，只为了迫于技术限制而被迫放弃所有，重新围绕完全不同的字体进行重构的一把利剑穿透了他的心脏！给点尊重，伙计！（<情节剧>） - Ken Bellows

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- robocat · Accepted Answer

在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，可以从div的offsetWidth中在javascript中检测到。

我已经探索了这个想法足够验证它非常可能会起作用，但我没有足够的时间来实际制作工作代码，很抱歉！

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

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