七. CSS字体

概述

所谓字体：即文字的形体结构，根据外观字体分不同的类别：衬线字体Serif、无衬线字体sans-serif和等宽字体monospace。每一个类别的字体又可以分成不同的字体族font family，而字体族又可以包含不同的字型font face。CSS的字体属性描述了一类字体的大小和外观。比如使用上面字体族，多大字号，粗体还是斜体等。

文本与字体的区别

文本就是一组字符，比如一个段落、一个标题，文本有行高、字符间、有没有下划线和缩进等

字体是用于描述一类文本的大小和外观，比如用什么字体族、多大字号、是否斜体

总的来说，Web页面中的字体有三个来源

①用户机器中已安装的字体

②保持在第三方网站中的字体，例如，Typekit和Google

③保持在自己Web服务器上面的字体

与字体有关样式的属性有：字体族(font-family)、字体大小(font-size)、字体样式(font-style)、字体粗细(font-weight)、字体变化(font-variant)、font(简写属性）

字体族(font-family)

用于设置文本使用什么字体，一般来说整个页面应该有一个主字体族，font-family是可用继承的属性，由于Web页面中的字体，要么来着用户本地电脑，要么来自服务器上，所以可能存在设定的某种字体无法使用的问题，要解决这个问题，需要在设定字体时，设置多种候选字体，组成字体栈。而且总是在最后声明一种通用字体。例如：

body{font-family: "trebuchet ms",tahoma,sans-serif}  /*字体名之间有空格，所以用引号括起*/

这个字体栈要求：文档选用trebuchet ms字体族显示，如果机器里没有trebuchet ms字体，则选用tahoma字体

如果tahoma也找不到，则随便找一个sans-serif字体即无衬线字体,这是一种通用方法，以上由首选字体、备用字体、通用字体构造一个字体栈

常用的通用字体

使用如下通用字体，可以确保在最坏的情况下，文档也能得到正确的显示。

serif(衬线字体)：字的笔画开始、结束的地方有额外的装饰，而且笔画的粗细会有所不同

sans-serif(无衬线字体)：没有衬线字体的额外装饰，而且笔画的粗细差不多

monospace(等宽字体)：指字符宽度相同的字体

cursive(草书/手写体)：手写风格

fantasy：不能归入其他分类的字体

字体大小(font-size)

各个浏览器在默认情况下，已经为页面中的每个HTML元素设定了font-size，因为当显式设定font-size的时，实际上是在修改其默认值，font-size属性是可以继承的

设定字体大小有两种单位：绝对单位和相对单位

相对单位:百分比%、em、rem

相对字体大小事相对于最近被设置过字体大小的祖先元素来确定的。

使用相对字体大小，可以自动调整各层元素大小。这对于创建响应式页面非常重要。

绝对单位：像素px、派卡pica、英寸

使用绝对单位设置字体大小很简单，设置多大就是多大，不受祖先元素的影响，缺点是调整整个页面字体大小时，需要手动一个一个修改字体尺寸

理解几个默认字体大小以及它们的转换

标签名	默认大小em
h1	2em	32px
h2	1.5em
p	1em	1em=16px

首先要理解的是浏览器的样式表给所有元素设定的默认样式是使用的相对单位em，font-size的基准大小是1em即16px

字体样式(font-style)

font-style用于设定字体是斜体还是正体，也就是说font-style的作用只是通过italic设置成斜体或者normal设置成正体

<p>This is a demo <span>Hello CSS！！</span> with font-size</p>

p{font-style: italic;}
span{font-style: normal;}

显示效果：

 关于nomal值

很多属性都有nomal值，它的作用是取消所有的特殊样式，让元素恢复到初始的默认值，即让属性值恢复正常

字体粗细(font-weight)

用于设置字体的粗细，对于各个浏览器实现方式不同，实际上对于浏览器来说，它只显示bold和normal两个值

字体变化(font-variant)

font-variant只有一个值即small-caps，它会使所有的小写字母变成对应的大写字母

简写规则

先看下面的样式：

p{font:bold italic small-caps .9em helvetica,arial,sans-serif;}

上面的样式 设置p段落的粗细、斜体、小型字母大写、大小和字体族

必须遵循相应的简写规则，浏览器才能正确的解析

规则一：必须声明font-size和font-family

规则二：其他必须按照如下顺序出现

1.font-weight、font-style、font-variant顺序不分先后

2.font-size

3.font-family