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，我确实得到了样式，比如我是否在寻找字体系列，但我没有得到渲染字体的确切名称。而如果我在 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”，我认为您无法从计算机安装的字体中找出浏览器正在替换它的字体.好吧，至少不容易或在所有情况下都不容易。有一些实验可以测量字体的不同字符，然后与已知的流行字体数据库进行比较，并且可以通过在画布中渲染并比较像素值更精确来做到这一点......但无论如何只是hacks，永远不要让浏览器告诉你计算机中安装了什么。