Font parsing fails on eg 12px/12px

[murkle]

Solution from here looks better than the crazy regex
https://stackoverflow.com/questions/5618676/how-to-parse-css-font-shorthand-format

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

For the record, the original
var regex = /^\s*(?=(?:(?:[-a-z]+\s*){0,2}(italic|oblique))?)(?=(?:(?:[-a-z]+\s*){0,2}(small-caps))?)(?=(?:(?:[-a-z]+\s*){0,2}(bold(?:er)?|lighter|[1-9]00))?)(?:(?:normal|\1|\2|\3)\s*){0,3}((?:xx?-)?(?:small|large)|medium|smaller|larger|[.\d]+(?:\%|in|[cem]m|ex|p[ctx]))(?:\s*\/\s*(normal|[.\d]+(?:\%|in|[cem]m|ex|p[ctx])))?\s*([-_,\'\"\sa-z0-9]+?)\s*$/i;

has been slightly adapted from https://stackoverflow.com/questions/10135697/regex-to-parse-any-css-font

[av01d]

murkle's comment converted to actual code:

ctx.prototype.__parseFont = function () { 
        function parsedStyleForCSS(cssString) {
            var el = document.createElement("span");
            el.setAttribute("style", cssString);
            return el.style; // CSSStyleDeclaration object
        }
        var parsed = parsedStyleForCSS('font:'+this.font);
        
       var data = {
           style: parsed['font-style'],
           size: parsed['font-size'],
           family: parsed['font-family'].replace(/"/g,''),
           weight: parsed['font-weight'],
           decoration: parsed['text-decoration'],
           href: null
        };

        //canvas doesn't support underline natively, but we can pass this attribute
        if (this.__fontUnderline === "underline") {
            data.decoration = "underline";
        }

        //canvas also doesn't support linking, but we can pass this as well
        if (this.__fontHref) {
            data.href = this.__fontHref;
        }

        return data;
    };