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”，例如，我认为你无法弄清楚浏览器用计算机安装的字体替换它的字体。好吧，至少不容易或在所有情况下。有一些实验测量字体的不同字符，然后与流行字体的已知数据库进行比较，并且可以通过在画布中渲染并比较像素值来更精确地进行...但无论如何只是黑客，从来没有浏览器告诉你计算机中安装了什么。

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

1 个答案: