javascript - JS 检测渲染字体与计算样式？

Question

我正在使用这个在 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，我确实得到了样式，比如我寻找 font-family，但我没有得到渲染字体的确切名称。而如果我检查 Chrome 中的 DevTools，我可以看到确切字体的实际名称。

例如。如果您对 https://carpentercollective.com/ 这样的网站使用此脚本我得到使用的字体是 serif1 但渲染的字体实际上叫做 Grifo

我如何使用 JS 获取该信息？

Answer 1

如果您查看 document.styleSheets 中的 CSS 规则，您会发现这些:

@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")
}

这离找到字体的真实名称又近了一步，为此我相信你必须对文件进行 XHR 分析并解析它的名称......我想已经有库可以读取字体的元数据可用。

这只适用于网络字体，例如，如果家族名称是“sans-serif”，我认为您无法从计算机安装的字体中找出浏览器替换它的字体.好吧，至少不容易或在所有情况下。有一些实验测量字体的不同字符，然后与已知的流行字体数据库进行比较，并且可以通过在 Canvas 中渲染并比较像素值来更精确地做到这一点......但无论如何只是黑客攻击，浏览器永远不会告诉您计算机中安装了什么。