CSS学习笔记(字体)

来源:互联网 发布:香山体重秤怎么样 知乎 编辑:程序博客网 时间:2024/05/15 07:56

最近在学习web的前端开发,所以打算写博客来记录在学习过程中学到的一些内容。

今天在看css字体这一章,主要的属性有font-family, font-weight, font-size, font-style.font-variant是指定字体,可以指定具体的字体,也可以指定字体类,比较好的实践是在具体的字体后面同样指定字体类,这样在浏览器找不到指定的字体的时候会在字体类中找到相近的字体,同时,当自己种有空格时,要使用引号将此字体引用起来,多个字体将用空格分隔。  font-weight用来给字体加粗,其值可以使normal,bolder,lighter,bold,inherit,100,200,300,400,500,600,700,800,900.  font-size用来指定字体的大小,其值可以是xx-small,x-small,medium,large,x-large,xx-large,smaller,larger,inherit,也可以是百分数,或是em,百分数和em是相对于服元素的。1em=父元素的px大小。font-style是用来设定字体的风格,其值可以italic,oblique,normal,inherit。italic与oblique很相近,有些浏览器甚至是不区分。font-variant是用来设置字体的变形,它的值可以是small-caps,normal,inherit。small-caps是大写的字母变得更大些,小写的字母变成大写,但是比大写的字母小。由于这些属性都很复杂,而且使用起来很麻烦,所以有个font属性很好的解决了这个问题,font属性的值对顺序没有要求,但是除了font-size,和font-family,这两个值必须以这个顺序出现在最后两个值,并且必须存在,否则此属性可能会被忽略,在font中还可以设置一个属性值line-height,这个值是设置行高,它放在font-size值的后面,且需要一个“/”连接。

如果你希望做出来的网页类似操作系统的风格,那么可以使用系统的字体,其值有caption(用于有标题的控件,例如button),icon,menu,message-box,small-caption(用于小控件加标签),status-bar。。例如button{font:caption;},这样按钮看起来就行操作系统的按钮了,注意系统字体只能整体设计,但是一旦设置了系统字体就可以改变单个的值了,例如button{font:caption;font-size:1em;}。