font style order in canvas drawText

Question

If I draw a text on a canvas and set the font property the text is not show correctly if I change the order of values into the string property:

This work right:

context.font = "italic bold 24px Verdana"

but this not:

context.font = "bold Verdana italic 24px"

Into specification is asserted that this rules is the same as CSS rules but If I put also font-variant and line-height it does not work:

Into CSS rules the order is as follow?

style variant weight size line-hieght family

Answer 1

The 'font' property values need to be put in a specific order as described by the CSS 2.1 specifiation: http://www.w3.org/TR/CSS21/fonts.html#font-shorthand

Also note that the HTML5 specification says that any setting of line-height (while allowed) will be ignored.