除非还设置了字体大小，否则通过style.font设置font-family不起作用

Question

I want to set the font of a bit of text through some JavaScript. For some reason, it seems that I can only do so when setting the font-size as well. So this works:

el.style.font = "10px arial, serif"

but this doesn't

el.style.font = "arial, serif"

( jsfiddle example )

I know there are other ways to set the font, but for other reasons this approach would be convenient -- why isn't it working?

I've checked both Firefox and Chrome, so I assume it's something I don't understand as opposed to a bug.

Answer 1

Because according to the definition from W3C, font-size must be there if you include font-family .

[
    [ <‘font-style’> || <font-variant-css21> || <‘font-weight’> || <‘font-stretch’> ]?
    <'font-size'>
    [ / <'line-height'> ]?
    <'font-family'>
]             | 
caption       |
icon          |
menu          |
message-box   |
small-caption |
status-bar

Edit: Updated to CSS3 definition.

Answer 2

你错误的font为font-family （在JS-speak中的fontFamily ）。