腳本查找頁面上使用的所有字體

是否有簡單的方法來解析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

腳本查找頁面上使用的所有字體

回答

相關問題