CSS（6）字体
CSS 字体属性用于定义文本的字体系列（font-family)、字体大小(font-size)、字体粗细(font-weight)、字体风格（font-style,如斜体）和字体变形（font-variant,如小型大写字母）等。
一、font-family
1.字体系列简介
就像传统的文字处理软件（比如Word）一样，设置字体属性是样式表的最常见的用途之一。不过，尽管字体选择很重要，但是至少在目前还没有一种办法能确保在 Web 上一致地使用字体，因为没有一种统一描述字体和字体的变形的方法。
在Web领域，存在字体的命名混乱的问题：实际上，在Web中相同的字体可能有很多不同的称呼，我们所认为的“字体”可能有许多字体变形组成，分别用来描述粗体、斜体文本，等等。例如，你可能已经对字体 Times 很熟悉。不过，Times 实际上是多种变形的一个组合，包括 TimesRegular、TimesBold、TimesItalic、TimesOblique、TimesBoldItalic、TimesBoldOblique，等等。
CSS提供了一种解决字体混乱的方案：除了具体的字体系列（特定字体）外，CSS还定义了 5 种通用字体系列： Serif 字体、Sans-serif 字体、Monospace 字体、Cursive 字体和Fantasy 字体。我们可以在 font-family 属性中提供一个特定字体系列和一个通用字体系列，如果用户代理不支持这个特定的字体，则可以从后面的通用字体系列中选择一个字体作为候选字体。
这里的字体系列多从英文字体方面介绍的，以上内容的具体详情可以参考：http://www.w3school.com.cn/css/css_font-family.asp
2.为文本指定字体系列
在CSS中，使用font-family属性为文本指定字体（字体系列）。
a.使用通用字体系列：当我们要在文档中使用一种 sans-serif 字体，或者说我们不确定要使用哪一种具体的字体（但知道它所在的通用字体系列是sans-serif），就可以使用通用字体系列。以下就是一个合适的声明：
/*为body元素以及子元素设置sans-serif字体系列*/ body {font-family: sans-serif;}
这样用户代理（浏览器）就会从 sans-serif 字体系列中选择一个字体（如 Helvetica），并将其应用到 body 元素。因为有继承，这种字体选择还将应用到 body 元素中包含的所有元素，除非有一种更具体的选择器将其覆盖。
b.使用具体字体
通过 font-family 属性，除了为文本设置通用的字体系列，我们还可以设置更具体的字体。比如，下面的例子为所有 h1 元素设置了 Georgia 字体（Georgia字体属于Serif字体系列）：
/*为一级标题指定具体字体*/ h1 {font-family: Georgia;}
c.将具体字体和通用字体系列结合使用
上例中为h1指定了具体的字体Georgia，但这个规则有一个问题：如果用户代理（客户计算机）上没有安装 Georgia 字体，就只能使用用户代理的默认字体来显示 h1 元素。那么，我们通过Georgia字体为文本和页面设计的效果都会消失。为了解决这个问题，我们可以将特定字体名和通用字体系列结合使用。语法格式为：selector {font-family:具体字体,通用字体系列}。比如：
/*具体字体和通用字体系列相结合*/ h1 {font-family: Georgia, serif;}
这样一来，如果用户计算机上没有安装 Georgia，但安装了 Times 字体（serif 字体系列中的一种字体），用户代理就可能对 h1 元素使用与 Georgia字体最接近的 Times字体。因此，我们建议在所有 font-family 规则中都提供一个通用字体系列。这样就提供了一条后路，在用户代理无法提供与规则匹配的特定字体时，就可以选择一个候选字体。
当我们对字体非常熟悉时，也可以为给定的元素指定一系列类似的字体。要做到这一点，需要把这些字体按照优先顺序排列，然后用逗号进行连接：
p {font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;}
根据这个列表，用户代理会按所列的顺序查找这些字体。如果列出的所有字体都不可用，就会简单地选择一种可用的 serif 字体。
d.使用引号
我们发现，上面的例子中有的字体使用了单引号。只有当字体名中有一个或多个空格（比如 New York），或者如果字体名包括 # 或 $ 之类的符号，才需要在 font-family 声明中加引号。单引号或双引号都可以接受。但是，如果把一个 font-family 属性放在 HTML 的 style 属性中，则需要使用该属性本身未使用的那种引号：
<!--当CSS字体名中需要使用引号时，要和HTML文档中的引号区分开来--> <p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;">...</p>
二、font-style
font-style 属性用于设置字体风格，最常用于规定斜体文本。font-style属性有三个值：normal （ 文本正常显示）、italic（ 文本斜体显示）和oblique （ 文本倾斜显示）。
/*文本正常显示*/ p.normal {font-style:normal;} /*文本使用斜体字显示*/ p.italic {font-style:italic;} /*文本使用原来字体的倾斜形式显示*/ p.oblique {font-style:oblique;}
italic 和 oblique 的区别：font-style 非常简单：用于在 normal 文本、italic 文本和 oblique 文本之间选择。唯一有点复杂的是明确 italic 文本和 oblique 文本之间的差别。斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。但是在通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样（这一点使很多人不知道有oblique这个选项的存在，或者不知道italic和oblique的区别）。
三、font-variant
font-variant 属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。font-variant属性的取值主要有两个：normal（默认值，浏览器会显示一个标准的字体）和small-caps（浏览器会显示小型大写字母的字体），还有一个
inherit（规定应该从父元素继承 font-variant 属性的值）但是IE浏览器不支持该属性值。下面的示例把段落设置为小型大写字母字体：
/*将段落的字体设置为小型的大写字母*/ p {font-variant:small-caps;}
四、font-weight
font-weight属性设置文本的粗细。使用 bold 关键字可以将文本设置为粗体。关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。如果将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词 lighter 会导致浏览器将加粗度下移而不是上移。
/*正常*/ p.normal {font-weight:normal;} /*加粗*/ p.thick {font-weight:bold;} /*最粗*/ p.thicker {font-weight:900;}
五、font-size
font-size 属性设置文本的大小。需要注意的一点是：有能力管理文本的大小在 web 设计领域很重要。但是，您不应当通过调整文本大小使段落看上去像标题，或者使标题看上去像段落。请始终使用正确的 HTML 标题，比如使用 <h1> - <h6> 来标记标题，使用 <p> 来标记段落。
font-size 值可以是绝对或相对值。a.绝对值：将文本设置为指定的大小;不允许用户在所有浏览器中改变文本大小（不利于可用性）;绝对大小在确定了输出的物理尺寸时很有用。b.相对大小：相对于周围的元素来设置大小;允许用户在浏览器改变文本大小。注意：如果您没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)。
1.使用像素（pixels）来设置字体大小
通过像素设置文本大小，可以对文本大小进行完全控制：
/*使用像素设置字体大小*/ h1 {font-size:60px;} h2 {font-size:40px;} p {font-size:14px;}
在 Firefox, Chrome, and Safari 中，可以重新调整以上例子的文本大小，但是在 Internet Explorer 中不行。
2.使用 em 来设置字体大小
如果要避免在 Internet Explorer 中无法调整文本的问题，可以使用 em 单位代替 pixels。而且W3C 也推荐使用 em 尺寸单位。1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。
浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。可以使用下面这个公式将像素转换为 em：pixels/16=em
（注：16 等于父元素的默认字体大小，假设父元素的 font-size 为 20px，那么公式需改为：pixels/20=em）
h1 {font-size:3.75em;} /* 60px/16=3.75em */ h2 {font-size:2.5em;} /* 40px/16=2.5em */ p {font-size:0.875em;} /* 14px/16=0.875em */
在上面的例子中，以 em 为单位的文本大小与前一个例子中以像素计的文本是相同的。不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小。不幸的是，在 IE 中仍存在问题。在重设文本大小时，会比正常的尺寸更大或更小。
3.结合使用百分比和 EM
在所有浏览器中均有效的方案是为 body 元素（父元素）以百分比设置默认的 font-size 值。这种写法的浏览器兼容性很好，在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。
/*结合百分比和EM*/ body {font-size:100%;} h1 {font-size:3.75em;} h2 {font-size:2.5em;} p {font-size:0.875em;}
六、font
font 简写属性在一个声明中设置所有字体属性。这个简写属性用于一次设置元素字体的两个或更多方面。使用 icon 等关键字可以适当地设置元素的字体，使之与用户计算机环境中的某个方面一致。注意，如果没有使用这些关键词，至少要指定字体大小和字体系列。可以按顺序设置如下属性：
•font-style
•font-variant
•font-weight
•font-size/line-height
•font-family
此外，此属性也有第六个值："line-height"，可设置行间距。
可以不设置其中的某个值，比如 font:100% verdana; 也是允许的。未设置的属性会使用其默认值。
在一个声明中设置所有字体属性：
p.ex1 { font:italic arial,sans-serif; } p.ex2 { font:italic bold 12px/20px arial,sans-serif; }
