HTML5与CSS3学习笔记【第十章 为文本添加样式(一)】

---

前言

使用 CSS 可以修改文本的字体、大小、粗细、倾斜、行高、前景和背景颜色、间距和对齐方式，可以决定是否为文本添加下划线或删除线，可以将文本转化为全部使用大写字母、全部使用小写字母或使用小型大写字母。而且，通过短短几行代码就可以让这些样式应用于整篇文档或整个网站。

10.1.选择字体系列

对于自己的网站，一大关键问题就是选择标题和主体文本所用的字体。你将了解到，并非所有的系统都支持相同的默认字体，因此，应该定义替代字体作为备选。不过，让我们首先看看如何定义单个字体，以及未提供替代字体的影响。
设置字体的方法
在样式表中需要的选择器之后，输入font-family: name，这里的 name 是首选字体的名称。

由于 font-family 是继承属性，而我们对 body 元素设置了 Geneva 字体，该样式会应用到其他元素。通过对 h1 和 h2元素设置 Gill Sans 字体，覆盖了继承属性

一些 Windows 系统中并未安装 Geneva和 Gill Sans 字体。如果选择了访问者系统中没有的字体，他们的浏览器中就会显示默认字体（Windows 中 的 默 认 字 体 是 Times New Roman）
对于包含多个单词的字体名称，应该用引号（单引号或双引号）包围起来。可以使用小写字母指定字体名称，如font-family: geneva;开发人员可以指定自己想要设置的任何字体，不过访问者只会看到他们的系统里安装的字体。

10.2.指定替代字体

尽管你可以指定自己想要的任何字体，但这些字体不一定在每个系统上都能显示出来。为此，可以在fontfamily 属性中列举一种以上的字体。浏览器会使用列表中第一个已安装在访问者系统内的字体或Web字体。

第一字体栈告诉浏览器如果系统上没有Geneva 就用 Tahoma，如果这两个都没有就用标准的sans-serif。标题的字体栈提供了三种备选字体，替换字体可能无法完全匹配首先字体，不过，我们的目标是指定尽可能接近的字体

字体列表称为字体栈（font stack）。通常，字体栈至少包含三个字体：希望使用的字体、一个或几个替代字体，以及一个表示类属的标准字体，表示“如果其他的字体都不可用，就用这个”。
指定替代字体
(1) 输入 font-family: name，这里的name是首选字体的名称。
(2) 输入 , name2，这里的 name2 是第二字体的名称。用一个逗号和空格分隔每个字体。
(3) 根据需要，重复第 (2) 步，最后以一 个 表 示 类 属 的 标 准 字 体（serif、sans-serif、cursive、fantasy 或 monospace，它们代表首选字体最为接近的风格）结束字体列表。

10.3.创建斜体

在传统出版业中，斜体通常用来表示引述、强调的文本、外文单词（如 de rigueur）、学名（如 Homo sapiens）、电影片名等。
浏览器通常让一 些 HTML 元 素（ 如cite、em 和 i）默认以斜体显示，因此，不必在 CSS 中对这些元素设置斜体。有时你需要让一些内容以斜体显示，但上述元素从语义上来说都不合适。使用 CSS 的 font-style 属性可以让任何元素中的文本以斜体显示。
1. 创建斜体
(1) 输入 font-style:。
(2) 在 :（冒号）后输入 italic（创建斜体文本）或 oblique（创建倾斜文本）。（99%的情况下都会使用 italic。在所有情况下，很难察觉使用 oblique 与 italic 的差异。）

在这个例子中，段落以斜体显示

2. 取消斜体
   输入font-style: normal。

10.4.应用粗体格式

粗体格式可能是让文本突出显示的最常见、最有效的方式。例如，浏览器通常默认为 h1 ～ h6 添加粗体格式。同斜体一样，可以为任何格式添加或取消粗体。添加粗体和取消粗体使用 font-weight 属性。
1. 应用粗体格式
(1) 输入 font-weight:。
(2) 输入 bold，让文本显示为具有平均加粗值的粗体。这一属性值适用于大多数情况。或者输入100 ～ 900之间的100的倍数，其中 400 代表正常粗细，700 代表粗体。如果使用的是具有多种粗细版本的字体，这种方法就很有用（有些Web字体就采用了这种方法）。或者输入 bolder（更粗）或 lighter（更细）以设置相对当前粗细的值。

浏览器会自动为标题 h1 ～ h6 添加粗体格式。我为所有的 h1 和 h2 元素应用了正常的粗细，取消了自动添加的粗体格式。同时，我为 em 文本及链接、.subhead 添加了粗体格式

10.5设置字体大小

为网页里的文本设置字体大小有两种方式：直接使用像素指定要使用的特定字号，或使用百分数、em或者 rem 指定相对于父元素文本的大小。

这里使用像素值指定文本大小

对初学者来说，像素更容易理解，不过强烈建议你一开始就学习使用 em 这样的相对单位。使用相对单位可以有更大的灵活性，而且对定义页面中特定的设计部件（如空白、边距等）的尺寸很有帮助。在各种尺寸的设备（智能手机、平板电脑等）不断涌现的今天，使用相对单位有助于建立在各种设备都能显示良好的页面。

body {
 font-family: Geneva, Tahoma, Verdana, 
➝ sans-serif;
font-size: 100%; /* 16px */
}h1,
h2 {
 font-family: "Gill Sans", "Gill Sans MT", 
➝ Calibri, sans-serif;
 font-weight: normal;
}h1 {
font-size: 2.1875em; /* 35px/16px */
}
h2 {
font-size: 1.75em; /* 28px/16px */
}
em,
a:link,
.intro .subhead {
 font-weight: bold; }
.intro .subhead {
font-size: 1.125em; /* 18px/16px */
}
.intro p {
font-size: 1.0625em; /* 17px/16px */
}.project p {
font-size: .9375em; /* 15px/16px */
}

body 里的 font-size: 100% 声明为 em字体大小设置了参考的基准。这里的 100% 将被翻译为默认字体大小（大多数系统下为 16px）。这样，样式表的结果同上面的结果便是一样的。每个 font-size 属性值后面的注释解释了该值的计算方法，同时显示了等价的像素值
1. 理解 em 和百分数字体大小
设置相对于父元素的字体大小需要一点时间去习惯。你需要理解浏览器处理这些相对于父元素的单位的方式，下面花一点时间解释一下。

不过首先要说明，使用这种方法时，最好在 body 元素上建立一个基准，即声明 body { font-size:100%; } 。大多数时候，这项设置等价于将字体大小设为16px，即大多数系统的默认字体大小。照例，该属性值传递至其他的元素（记住，fontsize 是继承性属性），除非其他元素通过浏览器默认设置了自己的 font-size，或者在样式表指定了自己的 font-size。

那么，如何计算要指定的 em 值呢？实际上，1em 总是等于默认的字号大小，这是em 的工作原理。在这里，1em 就等于 16px，因为我们将其创建为元素的默认字号。据此可以通过一点点除法确定 em 值（或百分比）。
要指定的字体大小／父元素的字体大小＝值
让我们来看看如何将像素值改为 em。例如，如果要将 h1 设为 35px，同时已知其父元素的字体大小为 16px，因此35 / 16 = 2.1875因 此， 设 置 h1{font-size: 2.1875em;}就可以了。这条规则表示“将h1 文本的大小设置为其父元素文本大小的2.1875 倍”。另一种方式是写成 h1 { fontsize: 218.75%; }。不过，除了在 body 中设置基准 font-size 时使用百分数以外，设置字体大小时使用 em 比百分数更为常见。
2. 指定特定字体大小
(1) 输入 font-size:。
(2) 在冒号（:）后输入准确的字号，如13px。
或者使用关键字指定字体大小，即使用xx-small、x-small、small、medium、large、x-large 或 xx-large。
3. 根据父元素设置字体大小
(1) 输入 font-size:。
(2) 在冒号（:）后输入相对值，如 1.5em或 150%。或者使用相对关键字，即使用 larger 或smaller（这种用法没有百分数常见，而百分数又没有 em 常见）。
4. 根据根元素设置字体大小
(1) 输入 font-size:。
(2) 在 冒 号（:） 后 输 入 相 对 值， 如0.875rem。

10.6.设置行高

行高指的是段落的行距，即段落内每行之间的距离。使用大一些的行高有时候会使主体文本更容易阅读。对于超过一行的标题，使用较小的行高则会让它们看起来更美观。

... 省略前面的CSS ...
.intro {
 line-height: 1.45; }
.intro .subhead {
 font-size: 1.125em;
}
.intro p {
 font-size: 1.0625em;
}.project p {
font-size: .9375em; /* 15px/16px */
 line-height: 1.65; /* 15px*1.65 = 
➝ 24.75px */
}

假设 body 元素默认大小为 16 像素，.project 类 p 元素的字体大小为 0.9375em，即 15像素。行高将是 15 像素的 1.65 倍，即大约 24.75像素。我还设置了 .intro 容器的行高，它会被后代元素继承
设置行高的步骤
(1) 输入 line-height:。
(2) 输入 n，这里的 n 是一个数字，它与元素的字体大小相乘，得出需要的行高。（这是最为常用的方法，即一个没有单位的数字。）或者输入 a，这里的 a 是以 em、像素或磅（仅在打印样式表中使用磅）为单位的值。或者输入p%，这里的p% 是字体大小的百分数。如果使用数字设定行高（通常都这么做），那么所有的子元素都会继承这个因子。

因此，如果父元素的字体大小是 16 像素（或以 em 等表示的等价大小），行高是 1.5，则该元素的行高就是 24（即 16×1.5）像素。如果子元素的字体大小是 10 像素，则该元素的行高就是 15（即 10×1.5）像素。

如果使用百分数或 em 值，那么只会继承产生的行高（即计算出来的值）。因此，如果父元素的字体大小是 16 像素，行高是150%，则该元素的行高就是 24 像素。所有的子元素都将继承 24 像素的行高，不管字体大小是多少。