代码之家  ›  专栏  ›  技术社区  ›  oz1cz

检查web字体中的字符

  •  2
  • oz1cz  · 技术社区  · 7 年前

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

    编辑

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

    首先,您必须下载 最后度假地 Unicode字体: https://www.unicode.org/policies/lastresortfont_eula.html . (这有点棘手——我一直收到“网络错误”,但最后我成功了。)

    这个 最后度假地 据称,字体的每个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,俄语字符·替换为 最后度假地 . 所以Pacifico含有·,Merienda没有。

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

    1 回复  |  直到 7 年前
        1
  •  1
  •   RoelN    7 年前

    Wakamai Fondue 是一个工具,可以告诉您字体包含哪些字符。它还将告诉您字体中的任何OpenType特性,以及一些更多的细节。(完全公开:我写了那个工具)

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