【知识梳理】CSS字体属性字体样式：作用于字体的属性，会直接应用到文本中，比如使用哪种字体，字体的大小是怎样的，字体是粗

前言

用于样式文本的CSS属性通常可以分为两类：

字体样式：作用于字体的属性，会直接应用到文本中，比如使用哪种字体，字体的大小是怎样的，字体是粗体还是斜体，等等。
文本布局风格：作用于文本的间距以及其他布局功能的属性，比如，允许操纵行与字之间的空间，以及在内容框中，文本如何对齐。

颜色

color属性设置选中元素的前景内容的颜色（通常指文本，不过也包含一些其他东西，或者是使用text-decoration属性放置在文本下方或上方的线(underline overline)。

字体种类

要在你的文本上设置一个不同的字体，你可以使用font-family属性，这个允许你为浏览器指定一个字体（或者一个字体的列表），然后浏览器可以将这种字体应用到选择的元素上，如果指定的字体在该浏览器上不可用，那么浏览器会使用默认的字体。

网页安全字体

说到字体通用性，只有某几个字体通常可以应用到所有系统，因此可以毫无顾忌地使用，这些就是网页安全字体。

CSS默认字体类型

五种默认字体类型

px(像素)：将像素的值赋予给你的文本。这是一个绝对单位，他导致了在任何情况下，页面上的文本所计算出来的像素值是一样的。
em：1em等于我们设计的当前元素的父元素上的设置的字体大小。元素的font-size属性是从该元素的父元素继承的。所以这一切都是从整个文档的根元素——开始，浏览器的font-size标准设置的值为 16px。在根元素中的任何段落（或者那些浏览器没有设置默认大小的元素），会有一个最终的大小之：16px。其他元素也许有默认的大小，比如<h1>元素有一个2ems的默认值，所以他的最终大小值为32px。 **就是说em是相对父元素的字号，**他依赖于上层父元素的字体大小，追溯到根源，基础是元素的字体大小。
rem：这个单位的效果和em差不多，除了1rem等于HTML中的根元素的字体大小，而不是父元素。 就是说rem是相对于根元素的字号
vw和wh是相对于视口(viewport)的宽和高。

简单技巧

将根元素的字体大小设置为10px而不是16px，后面使用rem或者em,计算起来比较方便。实例如下：字体设置实例

字体样式，字体粗细，文本转换和文本装饰

CSS提供了4种常用的属性来改变文本的样子：

font-style：用来打开和关闭文本italic（斜体）。可能值如下： - normal：将文本设置为普通字体 (将存在的斜体关闭)。 - italic：如果当前字体的斜体版本可用，那么文本设置为斜体版本；如果不可用，那么会利用 oblique 状态来模拟 italics。 - oblique：将文本设置为斜体字体的模拟版本，也就是将普通文本倾斜的样式应用到文本中。
font-weight：设置文字的粗体大小。可能值如下： - normal，bold：普通或者加粗的字体粗细 - lighter，bolder：将当前元素的粗体设置为比其父元素粗体更细或更粗一步。 - 100-900：数值粗体值，如果需要，可提供比上述关键字更精细的粒度控制。
text-transform：允许你设置要转换的字体。值包括： - none：防止任何转型。 - uppercase：将所有文本转为大写。 - lowercase：将所有文本转为小写。 - capitalize：转换所有单词让其首字母大写。 - full-width：将所有字形转换成固定宽度的正方形，类似于等宽字体，允许对齐。拉丁字符以及亚洲语言字形（如中文，日文，韩文）
text-decoration：设置/取消字体上的文本装饰 (你将主要使用此方法在设置链接时取消设置链接上的默认下划线。) 可用值为： - none：取消已经存在的任何文本装饰。 - underline：文本下划线 - overline：文本上划线 - line-through：穿过文本的线 text-decoration 可以一次接受多个值

文字阴影

你可以为你的文本应用阴影，使用text-shadow属性，这最多需要4个值，如下例所示：

text-shadow: 4px 4px 5px red;

4个属性如下：

阴影与原始文本的水平偏移，可以使用大多数的 CSS 单位,但是 px 是比较合适的。这个值必须指定。

阴影与原始文本的垂直偏移;效果基本上就像水平偏移，除了它向上/向下移动阴影，而不是左/右。这个值必须指定。

模糊半径 - 更高的值意味着阴影分散得更广泛。如果不包含此值，则默认为0，这意味着没有模糊。可以使用大多数的 CSS 单位.

阴影的基础颜色，可以使用大多数的 CSS 颜色单位,如果没有指定，默认为 black.

文本布局

有了基本的字体属性，我们来看看我们可以用来影响文本布局的属性。

文本对齐

text-align属性依赖控制文本如何和他所在的内容盒子对齐，可用值如下，并且在与常规文字处理器应用程序种的工作方式几乎相同：

left：左对齐文本。
right：右对齐文本。
center：居中文字。
justify：使文本展开，改变单词之间的差距，使所有文本行的宽度相同。你需要仔细使用，它可以看起来很可怕。特别是当应用于其中有很多长单词的段落时。如果你要使用这个，你也应该考虑一起使用别的东西，比如CSS 属性 hyphens 告知浏览器在换行时如何使用连字符连接单词。可以完全阻止使用连字符，也可以控制浏览器什么时候使用，或者让浏览器决定什么时候使用。打破一些更长的词语。

行高

line-height属性设置文本每行之间的高，可以接受大多数单位，不过也可以设置一个无单位的值，作为乘数，通常这种是比较好的做法。无单位的值乘以 font-size来获得 line-height。当行与行之间拉开空间，正文文本通常看起来更好更容易阅读。推荐的行高大约是 1.5–2 (双倍间距。) 所以要把我们的文本行高设置为字体高度的1.5倍，你可以使用这个:

line-height: 1.5

就是说当line-height设置为无单位的倍数时，指的是当前行高等于字体大小font-size乘以倍数

字母和字间距

letter-spacing和word-spacing属性允许你设置你的文本中的字母与字母之间的间距、或是字与字之间的间距。你不会经常使用它们，但是可能可以通过它们，来获得一个特定的外观，或者让较为密集的文字更加可读。它们可以接受大多数单位。

其他值得一看的属性

Font样式
文本布局样式