首页>>网站建设>>Javascript>>经验笔记

在CSS中有关于Fonts字体相关的设置，比如：字体大小、字体字型、字体样式、字体系列、字体粗细等。

一、字体大小

字体大小是通过font-size属性来设置的，但是设置时有两种方式

1、绝对大小

绝对大小就是说给字体设置一个固定的值，比如：

p {font-size:14px;}

p {font-size:0.875em;} /* 14px/16=0.875em */

其中可以是像素px，也可以是em，1em=16px。这个是由W3C建议的，使用的时候请注意换算。

2、相对大小

相对大小就是值使用的是百分比方式：

body {font-size:100%;}

二、字体样式

在CSS中字体样式是通过font-style属性来定义的，可选值有：

normal 默认值。浏览器显示一个标准的字体样式。

italic 浏览器会显示一个斜体的字体样式。

oblique 浏览器会显示一个倾斜的字体样式。

inherit 规定应该从父元素继承字体样式。

p{font-style:normal}
p{font-style:italic}
p{font-style:oblique}

三、字体系列

字体系列是通过font-family来设置的，

font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。

PS: 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。

多个字体系列是用一个逗号分隔指明：

p{font-family:"Times New Roman", Times, serif;}

四、小型大写字母

小型大写字母使用的是font-variant，其值有：

normal 默认值。浏览器会显示一个标准的字体。

small-caps 浏览器会显示小型大写字母的字体。

inherit 规定应该从父元素继承 font-variant 属性的值。

效果如下：



五、字体粗细

字体的粗细是由font-weight来设置的，可选值有：

normal 默认值。定义标准的字符。

bold 定义粗体字符。

bolder 定义更粗的字符。

lighter 定义更细的字符。

inherit 规定应该从父元素继承字体的粗细。

也可以用100、200、300、400~900来定义粗细（由粗到细），其中normal相当于400，bold相当于700.

p{font-weight:bold;}

六、属性简写

同background一样，字体也有一个font属性。

p
{
    font:italic bold 12px/30px Georgia, serif;
}

属性总结：

序号	属性	描述
1	font	字体属性
2	font-family	设置字体系列
3	font-size	设置字体大小
4	font-style	设置字体样式
5	font-variant	设置小型大写字体
6	font-weight	设置字体粗细

学习不止眼前的教程与笔记还需实践与创新——小伙伴们块动手试试吧~