CSS 字体

Created: October-16, 2018

CSS 字体属性允许你为字体设置各种样式，如文本的字体系列，大小和粗体，变体等。

字体属性

在 CSS 样式为文本内容的字体提供多种特性，如： font-family ， font-style ， font-variant ， font-weight 和 font-size 。以下部分将逐一介绍这些属性中的每一个。

字体系列

font-family CSS 属性允许你设置字体系列名称和/或通用姓氏的优先级列表所选元素的文本内容。

该 font-family 属性可以包含多个字体名称作为后备系统。列出你想要的字体，然后列出第一个可能填写的字体（如果它不可用）。你应该用通用的五个字体系列来结束名单- ， serif、sans-serif、monospace、cursive 和 fantasy。字体系列声明可能如下所示：

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

注意： 如果字体家族的名称超过一个单词，它必须用引号引起来，像 Times New Roman、Courier New、Trebuchet MS 等等。

要了解有关常用字体组合的更多信息; 请查看网页安全字体。

字体样式

font-style 属性设置元素的文本内容的字体样式。

此属性的可能值为： normal ， italic 或 oblique 。

p.one {
    font-style: normal;
}
p.two {
    font-style: italic;
}
p.three {
    font-style: oblique;
}

注意： 乍一看，倾斜和斜体样式看起来都是一样的，但是有区别。italic 样式使用斜体版本的字体，而另一方面，oblique 文本只是普通字体的倾斜版本。

用关键字设置字体大小

通过在 body 元素上设置关键字字体大小，你可以在页面上的其他位置设置相对字体大小，使你能够相应地在整个页面上轻松地向上或向下缩放字体。字体绝对大小使用以下关键字之一指定 xx-small ， x-small ， small ， medium ， large ， x-large ， xx-large 。

使用以下关键字之一指定相对大小： smaller ， larger 。

用像素设置字体大小

当你需要像素精度时，以像素值（例如 12px，16px 等）设置字体大小是一个不错的选择。但是，结果可能会在浏览器中有所不同，因为它们使用不同的算法来实现类似的效果。

body {
    font-size: large;
}
h1 {
    font-size: larger;
}
p {
    font-size: smaller;
}

以像素定义字体大小不是很容易访问，因为用户无法从浏览器设置更改字体大小。例如，视力有限的用户可能希望将字体大小设置为大于你指定的大小。因此，如果要创建包容性设计，则应避免使用字体大小的像素值。

提示： 可以使用缩放工具在所有浏览器中调整文本大小。但是，此功能会调整整个页面的大小，而不仅仅是文本。

用 `Em` 设置字体大小

em 单元是指父元素的字体大小。

em 值的大小是动态的。定义 font-size 属性时，em 等于应用于元素父级的字体大小。

如果你 font-size 在 body 元素上设置了 20px，那么 1em = 20px 和 2em = 40px 。

如果你没有在页面上的任何位置设置字体大小，那么它是浏览器默认值，可能是 16px。所以，默认情况下 1em = 16px ，和 2em = 32px 。

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

警告： IE6 和 IE7 不接受夸大调整太大和太小的文本的。（在发布前测试）。

使用百分比和 Em 的组合

在所有浏览器中实现类似效果的解决方案是 font-size 为 body 元素设置默认百分比。一种流行的技术是将 body 的 font-size 设置为 62.5% （默认 16px 的 62.5%），相当于 10px 或 0.625em。

现在，你可以使用 em 单位为任何元素设置 font-size，用一些具有易于记忆的转换，比如 px 除以 10。值通过这样子如 10px = 1em ， 12px = 1.2em ， 14px = 1.4em ， 16px = 1.6em 等。请参阅以下示例：

body {
    font-size: 62.5%;    /* font-size 1em = 10px */
}
p {
    font-size: 1.6em;    /* 1.6em = 16px */
}

提示： 在万维网联盟（W3C）中建议使用 EM 或百分比（%）值，以创造更强大的，可扩展的布局。

字体重量

font-weight 属性指定字体的粗细或粗体。

font-style 属性的可能值是： normal ， bold ， bolder ， lighter ， 100 ， 200 ， 300 ， 400 ， 500 ， 600 ， 700 ， 800 ， 900 和 inherit。

数值 100 - 900 指定字体粗细，其中每个数字代表比其前身更深的权重。 400 跟 normal 是相同的， 700 跟 bold 是相同的。
bolder 和 lighter ，是相对于继承字体的粗细，而其他的值是绝对字体权值。

p {
    font-weight: bold;
}

由于大多数字体仅以有限数量的权重提供; 通常它们只能以正常和 粗体显示。如果字体在指定的重量中不可用，则将选择最接近的可用重量的替代品。

字体变体

font-variant 属性允许文本以特殊的小型大写字母变体显示。

小型大写字母跟正常的大写字母略有不同，其中它的小写字母看起来跟相对应的大写字母的较小的形式相同。

font-variant 属性的可能值是 normal ， small-caps 和 inherit。

p {
    font-variant: small-caps;
}