检查网页字体中的字符

Question

检查网页字体中的字符

htmlfontswebfonts

5

如何测试特定的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>

这将显示为：

对于Pacifico字体，显示F和Ф两个字符，但对于Merienda字体，俄语字符Ф被LastResort的默认图标替换。因此，Pacifico包含字符Ф，而Merienda不包含。

现在，我不知道这是否是一个可靠的方法，也不知道是否有更简单的方法来解决这个问题。

- oz1cz

取决于你的使用情况。因为使用WOFF2已经解决了“我不想加载巨大字体”的情况，它允许你一次性加载单个字体，并根据已加载的块是否覆盖页面上的一个或多个字符来分段加载小块。 - Mike 'Pomax' Kamermans

我需要显示Unicode字符C。我已经加载了字体F，但我不确定是否需要加载其他字体才能显示C。如果我在我的计算机上查看浏览器，字符C会被显示出来，但这并不能保证另一个设备也能显示C，如果C不是F的一部分。那么我该如何确定F是否包含C？ - oz1cz

你希望什么时候确定这个？我希望你不想在用户的计算机上执行此检查；虽然可能有一些猜测，例如通过在画布上绘制它并检查呈现的字符是否产生与默认字体相同的位图，但这可能已经为时过晚了，是吧？最好是阅读一下字体规格，我猜他们会提供他们支持的字符集从下载页面，并且否则，这个搜索查询返回了一些在线服务，可以为你提供它。 - Kaiido

不，我不想在用户的电脑上检查它。我非常乐意创建一个单独的网页，只在我的电脑上查看，但告诉我字体F是否包含字符C。 - oz1cz

你的解释太抽象了。我猜你实际上并不需要“字符C”，因为你展示的字体肯定包含大写字母C。听起来你是想确保有字体覆盖你的内容，在这种情况下，你想要通过运行你的页面通过字符分析器来查看你需要哪些字体子集。至于“我不明白为什么这应该那么难”：离线、在电脑上，一点也不难。甚至几乎没有难度。在浏览器中？非常难，因为没有一个浏览器通过JS API公开字体解析器。 - Mike 'Pomax' Kamermans

显示剩余3条评论

1个回答

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

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

- RoelN · Accepted Answer

Wakamai Fondue 是一个工具，可以告诉您字体包含哪些字符。它还会告诉您字体内部的任何 OpenType 功能以及一些其他详细信息。(完全透明: 我编写了该工具)

如果您想在客户端检查它，我认为没有办法绕过尝试呈现字符，然后检查是否实际呈现了该字符。如果您使用Adobe Blank 作为备用字体，则可以检查它是否呈现了字符(宽度大于0)或未呈现(宽度为0)。