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

Question

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

或者类似地,是否有一个脚本解析一个页面并返回包含和使用或包含哪些CSS规则而不使用？

例子:

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

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

我想某个人为此创建了一个应用程序？谁知道什么？

Answer 1

感谢上面的一些响应,我整理了一个工具来列出所有独特的字体堆栈,然后根据需要使用特定的字体堆栈突出显示所有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

收视率最高的应答（由凯尼伯）不包括: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 3

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

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 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

您想要查看主要浏览器中提供的所有开发人员工具。我敢说其中一些可以通过编程方式扩展（Firebug是开源的），因此大部分艰苦的工作已经为您完成。

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