如何检测是否已呈现 unicode 字符？

Question

我正在尝试编写一些 javascript 来检测浏览器中是否呈现了 unicode 字符。

注意——这个问题或类似的问题以前曾被问过，但他们都没有真正回答这个问题的答案。 要么选择的答案不适用于每个 unicode 字符，要么选择的答案以不同的方式解决提问者的问题。 例如，安装具有您要使用的 unicode 字符的字体。

我遇到了几种解决这个问题的方法。 我认为它们都没有涵盖所有可能的情况，也不是特别优雅的解决方案。

1. 画布

在画布元素中渲染 unicode 字符并将其与所有现有的后备字形进行比较，例如 或 ▯ 等...

如果它匹配这些字符中的任何一个，那么您就知道它没有正确呈现。

这个解决方案的问题是它需要知道所有这些后备字符是什么，这基本上是不可能的。 如果您测试像“▯”这样的字符，它也会显示假阴性结果

2. 对每个代码点使用带有空白、零宽度字符的后备字体

用下面的css渲染unicode字符，如果字符没有宽度，那么你就知道它没有正确渲染。

@font-face {
  font-family: 'Blank';
  src:url('~assets/fonts/blankfont.ttf') format('truetype');
}

.testfont {
    font-family:
                -apple-system,
                system-ui,
                BlinkMacSystemFont,
                "Segoe UI",
                Roboto,
                "Helvetica Neue",
                Arial,
                sans-serif,
                serif...
                ... every possible font that it could render in by default...

                "Blank"
}

这种方法的主要问题是知道角色可以呈现的所有可能的字体。我已经尝试过这种方法。 我会渲染相同的 unicode 字符两次，一次使用上述 css，再次不使用 css。

我发现 unicode 字符有时会在没有 css 的情况下正确呈现，并使用 css 呈现为空白。 这表明我的系统上有更多的后备字体没有被 serif、sans-serif 和其他通用 css 字体系列覆盖。

因此，您必须在回退到“空白”字体之前添加所有可能的字体。

这两种方法可能在大部分时间都有效，但需要大量修补。 但我正在寻找一种始终有效的方法。

任何帮助将非常感激。 如果我找到解决方案，我一定会在这里发布。

Answer 1

做到这一点的唯一方法是让字体堆栈中的所有字体都可供检查，然后测试该堆栈中的每个字体以查看它是否支持您关心的字符。

画布将无法工作，因为 (a) 没有通用的“不支持”字形，每种字体都可以定义自己的字形，因此您必须为每组字体构建“不支持”字形列表你用。 但是 (b) 画布也是一个成像位图，因此由于点大小、子像素偏移和像 ClearType 这样的文本渲染优化，尝试将像素与已知图片匹配变得非常复杂。

此外，希望“丢失的字形”占用零空间通常是一个非常糟糕的主意：相反，使用一种可以非常清楚地显示您丢失字形的字体，并在实时推送丢失字符的更新之前修复这些字体。 这是您编写集成测试的目的之一。

唯一可靠的方法是只使用 webfonts，而不是内置字体（因此没有“Times New Roman”或“Hiragino”）并且没有“serif”或“sans”作为最终的通用类别关键字，而是使用 Adob​​e Blank 之类的东西，以及然后对于这些字体中的每一种，检查这些字体是否在 OpenType cmap 级别支持您尝试渲染的字符。

（你可以在服务器端做那个，或者你可以用fontkit或font.js 之类的东西在浏览器中做那个）