सीएसएस फ़ॉन्ट शॉर्टेंड प्रारूप का विश्लेषण कैसे करें

Question

मुझे सीएसएस फ़ॉन्ट शॉर्टेंड प्रारूप को अलग-अलग घटकों (फ़ॉन्ट-फ़ैमिली, फ़ॉन्ट-साइज, फ़ॉन्ट-वेट, ...) में पार्स करने की आवश्यकता है। यह शॉर्टेंड प्रारूप बहुत जटिल दिखता है। यहां दो उदाहरण हैं:

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

इससे पहले कि मैं इसके लिए एक पार्सर लेखन शुरू, वहाँ पहले से मौजूद पार्सर मैं इस्तेमाल कर सकते हैं (अधिमानतः जावास्क्रिप्ट में लिखा) है?

Answer 1

यहाँ एक "अस्थायी डोम तत्व और jQuery के सीएसएस() फ़ंक्शन का उपयोग कर" समाधान है:

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

पार्स नियम described in the spec हैं जिनमें guide to reading the language used to express the value rules भी है।

Answer 3

यहाँ एक फ़ॉन्ट पार्सर समारोह के अपने ही विनम्र कोशिश है मैं तो बस बनाया था। लेकिन मुझे यकीन नहीं है कि यह फ़ॉन्ट शॉर्ट हैंड प्रारूप की सभी विशेषताओं के साथ काम करता है।

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

शुद्ध मुक्त दूरी जावास्क्रिप्ट संस्करण:

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 

आप पूरा स्टाइलशीट के साथ इसी तरह कुछ करने के लिए देख रहे हैं, इस सवाल का जवाब देखें: Parsing CSS in JavaScript/jQuery