Cómo analizar el formato abreviado de fuente CSS

Question

Necesito analizar el formato abreviado de fuente CSS en los componentes separados (font-family, font-size, font-weight, ...). Este formato abreviado parece bastante complicado. He aquí dos ejemplos:

10px sans-serif 
bold italic small-caps 1em/1.5em verdana,sans-serif 

Antes de empezar a escribir un analizador para ello, es que hay un analizador que ya existe por ahí que podría utilizar (preferiblemente escrito en JavaScript)?

Answer 1

Aquí hay un "elemento DOM temporal y usando css() la función de jQuery" solución:

http://jsfiddle.net/thirtydot/tpSsE/2/

var $test = $('<span />'); 
$test.css('font', 'bold italic small-caps 1em/1.5em verdana,sans-serif'); 

alert($test.css('fontWeight')); 
alert($test.css('fontStyle')); 
alert($test.css('fontVariant')); 
alert($test.css('fontSize')); 
alert($test.css('lineHeight')); 
alert($test.css('fontFamily')); 

Answer 2

Las reglas de análisis son described in the spec que también tiene guide to reading the language used to express the value rules.

Answer 3

Aquí es mi propio intento humilde de una función de fuente analizador acabo creado. Pero no estoy seguro de si funciona con todas las especialidades del formato de letra abreviada.

function parseFont(font) 
{ 
    var fontFamily = null, 
     fontSize = null, 
     fontStyle = "normal", 
     fontWeight = "normal", 
     fontVariant = "normal", 
     lineHeight = "normal"; 

    var elements = font.split(/\s+/); 
    outer: while (element = elements.shift()) 
    { 
     switch (element) 
     { 
      case "normal": 
       break; 

      case "italic": 
      case "oblique": 
       fontStyle = element; 
       break; 

      case "small-caps": 
       fontVariant = element; 
       break; 

      case "bold": 
      case "bolder": 
      case "lighter": 
      case "100": 
      case "200": 
      case "300": 
      case "400": 
      case "500": 
      case "600": 
      case "700": 
      case "800": 
      case "900": 
       fontWeight = element; 
       break; 

      default: 
       if (!fontSize) 
       { 
        var parts = element.split("/"); 
        fontSize = parts[0]; 
        if (parts.length > 1) lineHeight = parts[1]; 
        break; 
       } 

       fontFamily = element; 
       if (elements.length) 
        fontFamily += " " + elements.join(" "); 
       break outer; 
     } 
    } 

    return { 
     "fontStyle": fontStyle, 
     "fontVariant": fontVariant, 
     "fontWeight": fontWeight, 
     "fontSize": fontSize, 
     "lineHeight": lineHeight, 
     "fontFamily": fontFamily 
    } 
} 

Answer 4

puro de corral Javascript versión:

var parsedStyleForCSS = function(cssString){ 
    var el = document.createElement("span"); 
    el.setAttribute("style", cssString); 

    return el.style; // CSSStyleDeclaration object 
}; 

var parsedStyle = parsedStyleForCSS("font: bold italic small-caps 1em/1.5em verdana,sans-serif"); 

console.log(parsedStyle["fontWeight"]); // bold 
console.log(parsedStyle["fontStyle"]); // italic 
console.log(parsedStyle["fontVariant"]); // small-caps 
console.log(parsedStyle["fontSize"]); // 1em 
console.log(parsedStyle["lineHeight"]); // 1.5em 
console.log(parsedStyle["fontFamily"]); // verdana, sans-serif 

Si usted está mirando para hacer algo similar con hojas de estilo completas, consulte esta respuesta: Parsing CSS in JavaScript/jQuery