CSS系列之字体属性

字体属性作用

CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式（如斜体）。

定义字体:

CSS 使用 font-family 属性定义文本的字体,此参数可以有多个,用逗号分隔即可.

示例:

<style>
p { 
  /* 定义p标签所使用的字体为微软雅黑 */
  font-family:"微软雅黑";
}

div {
  /* 定义div 标签所使用的字体,浏览器会首先加载第一个字体,即Arial字体,当用户不存在这款字体时,采用第二个字体,即Microsoft Yahei(微软雅黑),遇到字体需要空格时,用引号包括字体名. */
  font-family: Arial, "Microsoft Yahei", "微软雅黑";
}
</style>

注意:

• 各种字体之间必须使用英文状态下的逗号隔开
• 一般情况下,如果有空格隔开的多个单词组成的字体,加引号.
• 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
• 最常见的几个字体：body {font-family: ‘Microsoft YaHei’,tahoma,arial,‘Hiragino Sans GB’; }

字体大小:

CSS 使用 font-size 属性定义字体大小。

<style>
p {
  /* 定义p标签文字大小为12像素. */
  font-size: 20px;
}
</style>

注意:

• px（像素）大小是我们网页的最常用的单位

• 谷歌浏览器默认的文字大小为16px,不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小

• 可以给 body 指定整个页面文字的大小

字体粗细:

CSS 使用 font-weight 属性设置文本字体的粗细.

示例:

<style>
p {
  /* 定义p标签文字粗细为加粗. */
  font-weight: bold;
}
</style>

font-weight属性值:

属性值	描述
normal	默认(不加粗)
bold	加粗
100~900	400等同于normal,700等同于bold,书写的时候不能加单位

文字样式:

CSS 使用 font-style 属性设置文本的风格。

示例:

<style>
p {
   /* 定义p标签文字为斜体. */
  font-style: italic;
}
</style>

font-style属性值:

属性值	作用
normal	默认值,浏览器会显示标准的字体样式
italic	浏览器会显示斜体的字体样式

字体复合属性:

字体属性可以把以上文字样式综合来写, 这样可以更节约代码:

示例:

<style>
body {
/* 
需要按照以下顺序书写:
font: font-style font-weight font-size/line-height	font-family;
*/

font: italic 700 16px 'Microsoft yahei';
}
</style>

注意:

• 使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
• 不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

总结与扩展:

属性	描述
font	在一个声明中设置所有字体属性。
font-family	规定文本的字体系列。
font-size	规定文本的字体尺寸。
font-size-adjust	为元素规定 aspect 值。
font-stretch	收缩或拉伸当前的字体系列。
font-style	规定文本的字体样式。
font-variant	规定是否以小型大写字母的字体显示文本。
font-weight	规定字体的粗细。