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

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

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

示例：

如果我分析

index.html

，我想知道使用了两种字体堆栈：

font-family:Georgia，serif

和

font-family:Arial，sans-serif

或者，如果我解析

index.html

，我想知道

style.css

的第10、12和15行是否被使用

---

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

你想看看主流浏览器提供的所有功能。我敢说，其中一些可以通过编程方式进行扩展（是开源的），所以大部分艰苦的工作已经为您完成了

---

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

开发人员工具对于这类事情很方便，但是您可以通过循环每个元素并查看其计算样式属性来实现自己的功能

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

函数样式页面（css，详细）{
if（getComputedStyle的类型==“未定义”）
getComputedStyle=函数（元素）{
返回元素currentStyle；
}
var who，hoo，values=[]，val，
节点=document.body.getElementsByTagName（'*'），
L=节点长度；
对于（var i=0；i对于你的第一个问题你可以使用一个专门的网站，如。
有时生成的css文件会导致问题。
此工具的优点是，它可以将所有网站页面爬网到一个整体摘要中。使用浏览器扩展很难实现（尽管可能）

开发人员的另一种解决方案是浏览器扩展：
Firefox扩展：
或

Chrome扩展：
或

经验丰富的开发人员的最佳解决方案：
从github安装免费工具：

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


此工具可以检测url中的所有字体，还可以检测哪些网站使用字体（由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:

函数样式页面（css，详细）{
if（getComputedStyle的类型==“未定义”）
getComputedStyle=函数（元素）{
返回元素currentStyle；
}
var who，hoo，values=[]，val，
节点=document.body.getElementsByTagName（'*'），
L=节点长度；
对于（var i=0；iES2015的操作方式，还支持
：：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”，“Console”，“Menlo”，“Monaco”，“Lucida Console”，“Liberation Mono”，“DejaVu sans Mono”，“Bitstream Vera sans Mono”，“Courier New”，“monospace”]
多亏了，我创建了一个工具来列出所有独特的字体堆栈，然后根据需要使用特定的字体堆栈高亮显示所有DOM元素

以下是该文件；顶部有几个示例显示了不同的使用方法：

简而言之，下载该文件并将其包含在源代码中，或者将其复制/粘贴到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（）问题是如何列出所有使用的字体，而不是检查某个段落或跨度中使用的字体。使用inspector意味着她必须检查所有跨度，这意味着没有做任何艰苦的工作来获得字体列表