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中各个属性值的顺序是有要求的,字号和字体要排在其他的后面,并且只能字号字体,不能字体字号,不然是不会生效的。

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