检查网络字体中的字符

oz1*_*1cz 4 html fonts webfonts

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

编辑

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

首先,您必须从 Unicode下载LastResort字体:https : //www.unicode.org/policies/lastresortfont_eula.html。(这有点棘手 - 我不断收到“网络错误”,但最终我成功了。)

据称,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>
Run Code Online (Sandbox Code Playgroud)

这将显示为:

在此处输入图片说明

对于 Pacifico,F 和 ? 显示,但对于 Merienda 俄语字符?被LastResort的默认图标替换。所以 Pacifico 包含 ?,Merienda 不包含。

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

Roe*_*elN 6

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

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