css常用属性初总结：font

平时在做项目时，UX常说的一句话就是“这里的字体不对吧，字体大小也不太对，你们前端有没有按规范来”,今天，我们就一起来看看这折磨人的font属性。

字体属性font-family

允许值 系列名

初始值 与用户代理有关

可否继承 可继承

适用于 所有元素

如果需要将某个元素的字体修改只需简单的一句代码：

p{font-family:sans-serif;}

这样p元素中的文字就变成了改字体。这里的字体名字不区分大小写。对于有空格的字体名或则带特殊符号的字体名，要将字体用引号包裹起来，
如果我们设置的字体用户代理没有该字体文件，那么这条属性是不会生效的，我们可以给元素设置多个字体属性，没有用户代理没有字体文件就会继续匹配下一个字体，直到匹配成功为止。

如：p{font-family:sans-serif,Garamond;}
然而css3给我们带来了更完美的解决方案，可以自定义字体，这个我们以后会谈到，这里就不详细说了。

字体加粗font-weight

允许值 normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

初始值 normal

可否继承 是

适用于 所有元素

我们通常使用font-weight来设置字体加粗，用法其实也很简单，如

p{font-weight:blod;}

这样p元素的字体就加粗了。这里的字体加粗分为九个等级，至于每个等级如何渲染的，大家可以去尝试。

字体尺寸font-size

允许值 xx-small | x-small | small | medium | large | x-large | xx-larfe | xx-large | smaller | large | <长度> | <百分比>

初始值 medium

可否继承 是

注意：百分比是指相对于父元素的字体尺寸的百分比，且百分比是可以累计叠加的。

设置字体的大小写法和上面的类似：

p{font-size:12px;}

这样p元素的文字大小就变成了12px。字体尺寸的允许值种类比较多，但是在实际中百分比和尺寸用的更多。

而关于字体样式和字体变形这里就不详细说了，用法和其他类似。当需要p元素中是12px，加粗，sans-serif，斜体，我们在如何书写？

p{font-size:12px;font-family:sans-serif;font-weight:bold;font-style:italic;}

这样写css估计手都要废掉了。其实，可以支持font简写写法。像这样：

p{font:italic blod 12px sans-serif}

是不是感觉代码简洁多了，但是这里有些小问题要注意：font中各个属性值的顺序是有要求的，字号和字体要排在其他的后面，并且只能字号字体，不能字体字号，不然是不会生效的。

好了，今天的文章就这样了。下次见了!