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

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

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

例子：

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

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

我想像某个地方有人为此创建了一个应用程序？任何人都知道什么？

来源

2012-01-09 christina

-2

你想看看主要浏览器提供的所有developer tools。我敢说，其中一些可以通过编程扩展（Firebug是开源的），所以大部分的努力工作已经完成。

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

来源

2012-01-09 16:55:27

开发人员工具对于这类事情很方便，但是您可以通过遍历每个元素并查看其计算的样式属性来旋转自己。

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

来源

2012-01-09 18:03:39 kennebec

'TypeError：无法读取未定义的属性'nodeName'（google-chrome linux） – g33kz0r 2013-03-12 16:34:53

为，你可以使用一个专门的网站像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/

该工具可从网址检测到所有的字体也检测其网站上使用的字体。

来源

2015-04-16 19:00:13 user2267379

http://website-font-analyzer.com/链接已死 – 2016-07-13 17:20:05

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

我已经修改了它稍微包括：这样做，还支持::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:

来源

2016-01-26 19:55:01 danyamachine

ES2015方式。

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

}

当在计算器上运行此，将返回["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"]

来源

2016-10-06 15:31:59

感谢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()。

来源

2017-01-12 16:46:14

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

回答

相关问题