检查网页字体中的字符

时间:2018-07-26 11:42:15

标签: html fonts webfonts

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

编辑

这是到目前为止我能想到的最好的解决方案:

首先,您必须从Unicode下载{em> 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>

因此将显示:

enter image description here

对于Pacifico,将同时显示F和Ф,但对于Merienda,俄语字符Ф将替换为 LastResort 中的默认图标。因此Pacifico包含Ф,而Merienda则不包含。

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

1 个答案:

答案 0 :(得分:1)

Wakamai Fondue是一个工具,可以告诉您字体包含哪些字符。它还将告诉您字体内的所有OpenType功能,以及更多详细信息。 (完全公开:我写了那个工具)

如果您想在客户端进行检查,我认为没有办法尝试渲染字符,然后检查它是否实际被渲染。如果您使用Adobe Blank作为后备字体,则可以检查它是否呈现了字符(宽度应大于0)或不呈现字符(宽度应为0)。