JSはレンダリングされたフォントと計算されたスタイルを検出しますか？

Question

私はWebページで使用されるフォントを検出するため、これはgithubで見つかった、スクリプトをJS使用しています：

function styleInPage(css, verbose) { 
    // polyfill getComputedStyle 
    if (typeof getComputedStyle == "undefined") { 
     getComputedStyle = function (elem) { 
      return elem.currentStyle; 
     } 
    } 

    // set vars 
    var style, 
     thisNode, 
     styleId, 
     allStyles = [], 
     nodes = document.body.getElementsByTagName('*'); 

    // loop over all elements 
    for (var i = 0; i < nodes.length; i++) { 
     thisNode = nodes[i]; 
     if (thisNode.style) { 
      styleId = '#' + (thisNode.id || thisNode.nodeName + '(' + i + ')'); 
      style = thisNode.style.fontFamily || getComputedStyle(thisNode, '')[css]; 

      // get element’s style 
      if (style) { 
       if (verbose) { 
        allStyles.push([styleId, style]); 
       } else if (allStyles.indexOf(style) == -1) { 
        allStyles.push(style); 
       } 

       // add data-attribute with key for allStyles array 
       thisNode.dataset.styleId = allStyles.indexOf(style); 
      } 

      // get element:before’s style 
      styleBefore = getComputedStyle(thisNode, ':before')[css]; 
      if (styleBefore) { 
       if (verbose) { 
        allStyles.push([styleId, styleBefore]); 
       } else if (allStyles.indexOf(styleBefore) == -1) { 
        allStyles.push(styleBefore); 
       } 

       // add data-attribute with key for allStyles array 
       thisNode.dataset.styleId = allStyles.indexOf(styleBefore); 
      } 

      // get element:after’s style 
      styleAfter = getComputedStyle(thisNode, ':after')[css]; 
      if (styleAfter) { 
       if (verbose) { 
        allStyles.push([styleId, styleAfter]); 
       } else if (allStyles.indexOf(styleAfter) == -1) { 
        allStyles.push(styleAfter); 
       } 

       // add data-attribute with key for allStyles array 
       thisNode.dataset.styleId = allStyles.indexOf(styleAfter); 
      } 
     } 
    } 
    return allStyles; 
} 

事は、私はスタイルを得るかgetComputedStyleを使用する場合、私は、フォントファミリーを探している場合、言っています私はレンダリングされたフォントの正確な名前を取得しません。 ChromeのDevToolsを確認すると、正確な書体の実際の名前がわかります。

例えば、あなたはhttps://carpentercollective.com/ ようなウェブサイトに対して、このスクリプトを使用する場合、私は使用するフォントを取得serif1ですが、レンダリングされたフォントは、実際に私はJSでその情報を取得する方法にGrifo

と呼ばれているのですか？これは、フォントの本当の名前を発見するステップ近い

@font-face { 
    font-family: 'serif1'; 
    src: url("https://carpentercollective.com/wp-content/themes/carpentercollective/assets/fonts/Grifo M Medium.woff") format("woff"),url("https://carpentercollective.com/wp-content/themes/carpentercollective/assets/fonts/Grifo M Medium.eot") format("eot") 
} 

@font-face { 
    font-family: 'serif2'; 
    src: url("https://carpentercollective.com/wp-content/themes/carpentercollective/assets/fonts/Grifo M Regular.woff") format("woff"),url("https://carpentercollective.com/wp-content/themes/carpentercollective/assets/fonts/Grifo M Regular.eot") format("eot") 
} 

、そしてそのために私はあなたが持っていると信じて：あなたはdocument.styleSheetsでCSSルールを確認した場合

Answer 1

、あなたはこれらを見つけますXHRのファイルとそれの名前を解析する...私はすでに利用可能なフォントのメタデータを読むライブラリがあると思います。

これはウェブフォントでのみ機能します。たとえば、ファミリ名が "sans-serif"の場合、ブラウザがインストールされているコンピュータから置き換えられるフォントを特定できないと思いますフォント。まあ、少なくとも簡単には、すべての場合ではない。フォントの異なる文字を測定し、一般的なフォントの既知のデータベースと比較するいくつかの実験があります。キャンバスでレンダリングし、ピクセル値をより正確に比較することで可能ですが、いずれにしてもハッキング、決してブラウザがあなたにコンピュータに何がインストールされているかを伝えることはありません。