除非设置了字体大小，否则通过style.font设置font-family不起作用 [英] Setting font-family via style.font doesn't work unless font size is also set

问题描述

我想通过一些JavaScript设置一些文字的字体。出于某种原因，我似乎只能在设置 font-size 的时候这样做。所以这个工程：

  el.style.font =10px arial，serif
  

但这不是

  el。 style.font =arial，serif
  

（ jsfiddle例子）

我知道还有其他的方法来设置字体，这种方法会很方便 - 为什么不起作用？

我检查过Firefox和Chrome，所以我认为这是我不明白的到一个bug。

解决方案

因为根据来自W3C的定义， font-size 必须包含。



  [
 [<'font-风格'> || <字体变量-CSS21> || <字体重量> || <字体拉伸> ]？ 
<'font-size'> 
 [/<'line-height'> ]？ 
<'font-family'> 
] | 
标题| 
图标| 
菜单| 
 message-box | 
小标题| 
 status-bar 
  

编辑：更新为CSS3定义。 b

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.

解决方案

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.

这篇关于除非设置了字体大小，否则通过style.font设置font-family不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！