Secuencia de comandos para encontrar todas las fuentes utilizadas en una página

Question

¿Hay alguna forma fácil de analizar una página HTML para encontrar todas las fuentes utilizadas (o todas las pilas de fuentes utilizadas)?

O similarmente, ¿hay una secuencia de comandos que analiza una página y devuelve las reglas de CSS que se incluyen y usan o se incluyen y no se utilizan?

Ejemplos:

Si analizo index.html, que quieren saber que se usan 2 pilas de las fuentes: font-family: Georgia, serif y font-family: Arial, sans-serif.

O, si analizo index.html, quiero saber que se usan las líneas 10, 12 y 15 de style.css.

Me imagino que en algún lugar alguien ha creado una aplicación para esto? Alguien sabe de algo?

Answer 1

Quiere ver todos los developer tools que se ofrecen en los principales navegadores. Me atrevo a decir que algunos de ellos se pueden ampliar programáticamente (Firebug es de código abierto) por lo que la mayor parte del trabajo duro se ha hecho por usted.

Depende si solo quiere ver las reglas de CSS, o si realmente desea utilizarlas como entrada para su posterior procesamiento.

Answer 2

las herramientas de desarrollador son útiles para este tipo de cosas, pero puede hacer girar las suyas recorriendo cada elemento y observando sus propiedades de estilo calculadas.

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

Para su primera pregunta puede utilizar un sitio web especializado como https://unused-css.com. A veces, el archivo css generado causa problemas. La ventaja de esta herramienta es que puede rastrear todas las páginas del sitio a un resumen general. Será difícil de lograr con una extensión de navegador (aunque es posible).

Una solución alternativa para un desarrollador es una extensión del navegador: extensiones de Firefox: Dustme selector o Css usage extensiones

Chrome: Unused CSS o Css remove and combine

mejor solución para un desarrollador con experiencia: Instale una herramienta gratuita de github: https://github.com/search?utf8=%E2%9C%93&q=unused+css

Para su segunda pregunta, no existe ninguna herramienta en línea para extraer todas las fuentes de una página web. creé mi propia herramienta:

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

Esta herramienta puede detectar todas las fuentes a partir de una URL y también detectar qué sitios web utilizan una fuente.

Answer 4

La respuesta mejor calificada (por kennebec) no incluye :before y :after pseudoelementos.

He modificado ligeramente para incluir a aquellos:

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 manera de hacerlo, que también apoya ::before y ::after pseudo-selectores.

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

} 

Cuando se ejecuta esta en StackOverflow, volverá ["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

Gracias a some of the responses above, que arme una herramienta para listar todas las pilas de fuentes únicas y luego poner de relieve todos los elementos DOM utilizando una pila fuente específica, si se desea.

Aquí está el archivo; hay un par de ejemplos en la parte superior que muestran diferentes formas de usarlo: https://gist.github.com/macbookandrew/f33dbbc0aa582d0515919dc5fb95c00a

En resumen, descargue e incluya el archivo en su código fuente, o cópielo/péguelo en su consola JS, luego ejecute console.log(styleInPage('fontFamily')); para obtener un matriz de todas las pilas de fuentes únicas.

Ejemplo de salida en 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" 

y para marcar todos los elementos con una pila fuente específica, ejecute highlightInPage(4) (pase en el clave de la matriz base 0 de la matriz de arriba). Para borrar todos los aspectos más destacados, ejecute clearHighlights().