检查网络字体中的字符

Question

如何测试特定网络字体是否包含特定 Unicode 字符？我不能简单地将字符包含在某些文本中，因为浏览器的字体替换机制可能会选择另一种字体来显示字符。

编辑

这是迄今为止我能想到的最佳解决方案：

首先，您必须从 Unicode 下载 LastResort 字体：https://www.unicode.org/policies/lastresortfont_eula.html。（这有点棘手 - 我一直得到 "network error"，但最后我成功了。）

LastResort 字体据说每个 Unicode 字符都有一个替换图标。

现在，假设我要检查 Google 字体 "Pacifico" 和 "Merienda" 是否包含 Unicode 字符 F 和 Ф（Unicode 字符 0424）。我可以使用此代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Font detect</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Pacifico">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merienda">
    <style>
      @font-face {
        font-family: 'LastResort';
        src: url('LastResort.ttf') format('truetype');
      }

      p.pacifico {
          font-family: Pacifico, LastResort;
          font-size: 60pt;
      }

      p.lato {
          font-family: Merienda, LastResort;
          font-size: 60pt;
      }
    </style>

  </head>
  <body>
    <p class="pacifico">F &#x424;</p>
    <p class="lato">F &#x424;</p>
  </body>
</html>

这将显示为：

对于 Pacifico，F 和 Ф 都会显示，但对于 Merienda，俄语字符 Ф 被替换为 LastResort 中的默认图标。所以 Pacifico 包含 Ф，Merienda 没有。

现在，我不知道这是不是万无一失的方法，也不知道有没有更简单的方法。

Answer 1

Wakamai Fondue 是一个工具，可以告诉您字体包含哪些字符。它还会告诉您字体内的任何 OpenType 功能，以及更多详细信息。（完全披露：我写了那个工具）

如果你想在客户端检查它，我认为没有办法绕过尝试渲染角色然后检查它是否真的被渲染过。如果您使用 Adobe Blank 作为后备字体，您可以检查它是否呈现字符（宽度 > 0）或不呈现（宽度为 0）。

检查网络字体中的字符

Check for character in web font

html

fonts

webfonts