Question

是否有简单的方法来解析HTML页面以查找所使用的所有字体（或使用的所有字体堆栈）？

或者类似地，是否有一个脚本可以解析页面并返回包含和使用或包含哪些CSS规则但未使用？

示例：

如果我解析index.html，我想知道使用了2个字体堆栈：font-family: Georgia, serif和font-family: Arial, sans-serif。

或者，如果我解析index.html，我想知道style.css的第10,12和15行被使用。

我想某个人为此创建了一个应用程序？有人知道吗？

Answer 1

感谢some of the responses above，我整理了一个工具来列出所有独特的字体堆栈，然后根据需要使用特定的字体堆栈突出显示所有DOM元素。

这是文件;顶部有几个示例显示了使用它的不同方法：https://gist.github.com/macbookandrew/f33dbbc0aa582d0515919dc5fb95c00a

简而言之，下载并在源代码中包含该文件，或将其复制/粘贴到JS控制台中，然后运行console.log(styleInPage('fontFamily'));以获取所有唯一字体堆栈的数组。

stackoverflow.com上的示例输出：

Array[3]
    0: "Arial, "Helvetica Neue", Helvetica, sans-serif"
    1: "BlinkMacSystemFont"
    2: "Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif"

然后要突出显示具有特定字体堆栈的所有元素，请运行highlightInPage(4)（从上面的数组传入基于0的数组键）。要清除所有突出显示，请运行clearHighlights()。

Answer 2

开发人员工具对于这类事情很方便，但你可以通过循环遍历每个元素并查看其计算出的样式属性来自行创建。

function styleInPage(css, verbose){
    if(typeof getComputedStyle== "undefined")
    getComputedStyle= function(elem){
        return elem.currentStyle;
    }
    var who, hoo, values= [], val,
    nodes= document.body.getElementsByTagName('*'),
    L= nodes.length;
    for(var i= 0; i<L; i++){
        who= nodes[i];
        if(who.style){
            hoo= '#'+(who.id || who.nodeName+'('+i+')');
            val= who.style.fontFamily || getComputedStyle(who, '')[css];
            if(val){
                if(verbose) values.push([hoo, val]);
                else if(values.indexOf(val)== -1) values.push(val);
                // before IE9 you need to shim Array.indexOf (shown below)
            }
        }
    }
    return values;
}



// sample run:
// return unique values (verbose returns a value for every element that has the style set)
alert(styleInPage('fontFamily'));// returns array:

['Times New Roman',Georgia,serif,cursive,arial,sans-serif,Arial,sans-serif];


//shim
if![].indexOf){
    Array.prototype.indexOf= function(what, i){
        if(typeof i!= 'number') i= 0;
        var L= this.length;
        while(i< L){
            if(this[i]=== what) return i;
            ++i;
        }
        return -1;
    }
}

Answer 3

评分最高的答案（由kennebec提供）不包括:before和:after伪元素。

我稍微对其进行了修改以包含以下内容：

function styleInPage(css, verbose){
    if(typeof getComputedStyle== "undefined")
    getComputedStyle= function(elem){
        return elem.currentStyle;
    }
    var who, hoo, values= [], val,
    nodes= document.body.getElementsByTagName('*'),
    L= nodes.length;
    for(var i= 0; i<L; i++){
        who= nodes[i];
        if(who.style){
            hoo= '#'+(who.id || who.nodeName+'('+i+')');
            val= who.style.fontFamily || getComputedStyle(who, '')[css];
            if(val){
                if(verbose) values.push([hoo, val]);
                else if(values.indexOf(val)== -1) values.push(val);
            }
            val_before = getComputedStyle(who, ':before')[css];
            if(val_before){
                if(verbose) values.push([hoo, val_before]);
                else if(values.indexOf(val_before)== -1) values.push(val_before);
            }
            val_after= getComputedStyle(who, ':after')[css];
            if(val_after){
                if(verbose) values.push([hoo, val_after]);
                else if(values.indexOf(val_after)== -1) values.push(val_after);
            }
        }
    }
    return values;
}

alert(styleInPage('fontFamily'));// returns array:

Answer 4

ES2015的做法，也支持::before和::after伪选择器。

function listFonts () {

  let fonts = []

  for (let node of document.querySelectorAll('*')) {

    if (!node.style) continue

    for (let pseudo of ['', ':before', ':after']) {

      let fontFamily = getComputedStyle(node, pseudo).fontFamily

      fonts = fonts.concat(fontFamily.split(/\n*,\n*/g))

    }

  }

  // Remove duplicate elements from fonts array
  // and remove the surrounding quotes around elements
  return [...new Set(fonts)]
    .map(font => font.replace(/^\s*['"]([^'"]*)['"]\s*$/, '$1').trim())

}

在StackOverflow上运行时，将返回["Times", "Arial", "Helvetica Neue", "Helvetica", "sans-serif", "BlinkMacSystemFont", "Consolas", "Menlo", "Monaco", "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", "monospace"]

Answer 5

对于第一个问题，您可以使用https://unused-css.com等专门网站。有时生成的css文件会导致问题。此工具的优点是它可以将所有网站页面抓取到整体摘要。使用浏览器扩展很难实现（尽管可能）。

开发人员的替代解决方案是浏览器扩展程序： Firefox扩展： Dustme selector或Css usage

Chrome扩展程序： Unused CSS或Css remove and combine

经验丰富的开发者的最佳解决方案：从github安装免费工具： https://github.com/search?utf8=%E2%9C%93&q=unused+css

对于第二个问题，不存在从网页中提取所有字体的在线工具。 我创建了自己的工具：

http://website-font-analyzer.com/

此工具可以检测网址中的所有字体，还可以检测哪些网站使用字体。

Answer 6

您想查看主要浏览器中提供的所有developer tools。我敢说其中一些可以通过编程方式进行扩展（Firebug是开源的）所以大部分的努力都是为你完成的。

这取决于您是否只想查看CSS规则，或者您是否真的想将它们用作进一步处理的输入。

用于查找页面上使用的所有字体的脚本

6 个答案: