Tập lệnh để tìm tất cả các phông chữ được sử dụng trên một trang

Question

Có cách nào dễ dàng phân tích cú pháp trang HTML để tìm tất cả các phông chữ được sử dụng (hoặc tất cả các phông chữ được sử dụng) không?

Hoặc tương tự, có một tập lệnh phân tích một trang và trả về các quy tắc CSS nào được bao gồm và sử dụng hoặc bao gồm và không được sử dụng không?

Ví dụ:

Nếu tôi phân tích index.html, tôi muốn biết rằng 2 ngăn xếp phông chữ được sử dụng: font-family: Georgia, serif và font-family: Arial, sans-serif.

Hoặc, nếu tôi phân tích index.html, tôi muốn biết rằng các dòng 10, 12 và 15 của style.css được sử dụng.

Tôi tưởng tượng một nơi nào đó ai đó đã tạo ứng dụng cho điều này? Có ai biết gì không?

Answer 1

Bạn muốn xem tất cả các developer tools được cung cấp trong các trình duyệt chính. Tôi dám nói rằng một số trong những có thể được mở rộng lập trình (Firebug là mã nguồn mở) vì vậy hầu hết các công việc khó khăn đã được thực hiện cho bạn.

Nó phụ thuộc nếu bạn chỉ muốn xem các quy tắc CSS hoặc nếu bạn thực sự muốn sử dụng chúng làm đầu vào để xử lý tiếp.

Answer 2

công cụ nhà phát triển rất tiện lợi cho loại điều này, nhưng bạn có thể tự xoay vòng bằng cách lặp qua từng phần tử và xem các thuộc tính được tính toán của nó.

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

Đối câu hỏi đầu tiên của bạn bạn có thể sử dụng một trang web chuyên ngành như https://unused-css.com. Đôi khi, tệp css được tạo ra gây ra sự cố. Lợi thế của công cụ này là nó có thể thu thập dữ liệu tất cả các trang của trang web đến một bản tóm tắt tổng thể. Sẽ rất khó để đạt được với một phần mở rộng trình duyệt (mặc dù có thể).

Một giải pháp thay thế cho một nhà phát triển là một phần mở rộng trình duyệt: Firefox phần mở rộng: Dustme selector hoặc Css usage mở rộng

Chrome: Unused CSS hoặc Css remove and combine

giải pháp tốt nhất cho một nhà phát triển có kinh nghiệm: Cài đặt công cụ miễn phí từ github: https://github.com/search?utf8=%E2%9C%93&q=unused+css

Đối với câu hỏi thứ hai, không có công cụ trực tuyến nào tồn tại để trích xuất tất cả phông chữ từ trang web. Tôi tạo ra công cụ của riêng tôi:

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

Công cụ này có thể phát hiện tất cả các phông chữ từ một url và cũng phát hiện các trang web sử dụng một phông chữ.

Answer 4

Câu trả lời được đánh giá hàng đầu (bởi kennebec) không bao gồm các yếu tố giả :before và :after giả.

Tôi đã sửa đổi nó một chút để bao gồm những:

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 5

ES2015 cách để làm việc đó, cũng hỗ trợ ::before và ::after pseudo-selectors.

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

} 

Khi chạy này trên StackOverflow, sẽ trở lại ["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 6

Nhờ some of the responses above, tôi đặt cùng một công cụ để liệt kê tất cả đống font chữ độc đáo và sau đó đánh dấu tất cả các yếu tố DOM sử dụng một phông chữ chồng cụ thể, nếu muốn.

Đây là tệp; có một vài ví dụ ở trên cùng hiển thị các cách khác nhau để sử dụng: https://gist.github.com/macbookandrew/f33dbbc0aa582d0515919dc5fb95c00a

Tóm lại, tải xuống và đưa tệp vào mã nguồn của bạn hoặc sao chép/dán nó vào bảng điều khiển JS của bạn, sau đó chạy console.log(styleInPage('fontFamily')); để nhận mảng của tất cả các ngăn xếp phông chữ độc đáo.

Ví dụ đầu ra trên 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" 

Sau đó, để đánh dấu tất cả các yếu tố với một chồng phông chữ cụ thể, chạy highlightInPage(4) (vượt qua trong khóa mảng 0 dựa trên từ mảng ở trên). Để xóa tất cả các mục nổi bật, hãy chạy clearHighlights().