CSS中的文字样式
（https://developer.mozilla.org/zh-CN/docs/Learn/CSS/%E4%B8%BA%E6%96%87%E6%9C%AC%E6%B7%BB%E5%8A%A0%E6%A0%B7%E5%BC%8F/Fundamentals）
用于样式文本的 CSS 属性通常可以分为两类:
1.字体样式: 作用于字体的属性，会直接应用到文本中，比如使用哪种字体，字体的大小是怎样的，字体是粗体还是斜体，等等。
如：color、font-family、font-size、font-style、font-weight、text-decoration。
2.文本布局风格: 作用于文本的间距以及其他布局功能的属性，比如，允许操纵行与字之间的空间，以及在内容框中，文本如何对齐。
如：test-align、line-height、letter-spacing、word-spacing。
注意: 请记住，包含在元素中的文本是作为一个单一的实体。你不能将文字其中一部分选中或添加样式，如果你要这么做，那么你必须要用适合的元素来包装它们，比如<span>或者<span>，或者使用伪元素，如::first-letter(选中文本元素的第一个字母)。
字体——样式字体的属性
1.颜色
color属性设置选中元素的前景内容的颜色 (通常指文本，不过也包含一些其他东西）。
p {
color: red;
}
2.字体种类
font-family属性，这个允许你为浏览器指定一个字体 (或者一个字体的列表)，然后浏览器可以将这种字体应用到选中的元素上。浏览器只会把在当前机器上可用的字体应用到当前正在访问的网站上；如果字体不可用，那么就会用浏览器默认的字体代替default-font。
p {
font-family: arial;
}
网页安全字体
说到字体可用性，只有某几个字体通常可以应用到所有系统，因此可以毫无顾忌地使用。这些都是所谓的 网页安全字体：
默认字体
CSS 定义了 5 个常用的字体名称: serif, sans-serif, monospace, cursive,和 fantasy. 这些都是非常通用的，当使用这些通用名称时，使用的字体完全取决于每个浏览器，而且它们所运行的每个操作系统也会有所不同。
字体栈
由于你无法保证你想在你的网页上使用的字体的可用性 (甚至一个网络字体可能由于某些原因而出错), 可以提供一个字体栈 (font stack)，这样的话，浏览器就有多种字体可以选择了。只需包含一个font-family属性，其值由几个用逗号分离的字体名称组成。比如：
p {
font-family: "Trebuchet MS", Verdana, sans-serif;
}
注意: 有一些字体名称不止一个单词，比如Trebuchet MS ，那么就需要用引号包裹。
在这种情况下，浏览器从列表的第一个开始，然后查看在当前机器中，这个字体是否可用。如果可用，就把这个字体应用到选中的元素中。如果不可用，它就移到列表中的下一个字体，然后再检查。
在字体栈的最后提供一个合适的通用的字体名称是个不错的办法，这样的话，即使列出的字体都无法使用，浏览器至少可以提供一个还算合适的选择。为了强调这一点，如果没有其他选项可用，那么段落将被赋予浏览器的默认衬线字体 - 通常是Time New Roman - 这对于 sans-serif 字体是不利的。
3.字体大小
字体大小 ，通过font-size CSS 属性指定字体的大小。可以取大多数这些单位的值，最常用的单位是：
-
px(像素): 将像素的值赋予给你的文本。这是一个绝对单位， 它导致了在任何情况下，页面上的文本所计算出来的像素值都是一样的。 -
em: 1em 等于我们设计的当前元素的父元素上设置的字体大小 。你可以使用em调整任何东西的大小，不只是文本。你可以有一个单位全部都使用 em 的网站，这样维护起来会很简单。 -
rem: 这个单位的效果和em差不多，除了 1rem等于 HTML 中的根元素的字体大小， (i.e.<html>) ，而不是父元素。这可以让你更容易计算字体大小，但是遗憾的是，rem不支持 Internet Explorer 8 和以下的版本。如果你的项目需要支持较老的浏览器，你可以坚持使用em或px, 或者是 polyfill 就像 REM-unit-polyfill. （这个单位在“CSS的值和单位”一节也有讲解）
元素的font-size属性是从该元素的父元素继承的。所以这一切都是从整个文档的根元素——<html>开始。一个好的示例：
html {
font-size: 10px;
}
h1 {
font-size: 2.6rem;
}
p {
font-size: 1.4rem;
color: red;
font-family: Helvetica, Arial, sans-serif;
}
4.字体样式，字体粗细，文本转换和文本装饰
-
font-style: 用来打开和关闭文本 italic (斜体)。 可能的值如下 (你很少会用到这个属性，除非你因为一些理由想将斜体文字关闭斜体状态)：-
normal: 将文本设置为普通字体 (将存在的斜体关闭) -
italic: 如果当前字体的斜体版本可用，那么文本设置为斜体版本；如果不可用，那么会利用 oblique 状态来模拟 italics。 -
oblique: 将文本设置为斜体字体的模拟版本，也就是将普通文本倾斜的样式应用到文本中。
-
-
font-weight: 设置文字的粗体大小。这里有很多值可选 (比如 -light, -normal, -bold, -extrabold, -black, 等等), 不过事实上你很少会用到normal和bold以外的值：-
normal,bold: 普通或者加粗的字体粗细 -
lighter,bolder: 将当前元素的粗体设置为比其父元素粗体更细或更粗一步。100–900: 数值粗体值，如果需要，可提供比上述关键字更精细的粒度控制。
-
-
text-transform: 允许你设置要转换的字体。值包括：-
none: 防止任何转型。 -
uppercase: 将所有文本转为大写。 -
lowercase: 将所有文本转为小写。 -
capitalize: 转换所有单词让其首字母大写。 -
full-width: 将所有字形转换成全角，即固定宽度的正方形，类似于等宽字体，允许拉丁字符和亚洲语言字形（如中文，日文，韩文）对齐。
-
-
text-decoration: 设置/取消字体上的文本装饰 (你将主要使用此方法在设置链接时取消设置链接上的默认下划线。) 可用值为：-
none: 取消已经存在的任何文本装饰。 -
underline: <u>文本下划线</u>. -
overline: 文本上划线 -
line-through: 穿过文本的线strikethrough over the text.你应该注意到text-decoration可以一次接受多个值，如果你想要同时添加多个装饰值， 比如text-decoration: underline overline.。同时注意text-decoration是一个缩写形式，它由text-decoration-line,text-decoration-style和text-decoration-color构成。你可以使用这些属性值的组合来创建有趣的效果，比如text-decoration: line-through red wavy.
-
5.文字阴影
text-shadow: 4px 4px 5px red;
文本布局
1.文本对齐
text-align 属性用来控制文本如何和它所在的内容盒子对齐。可用值如下，并且在与常规文字处理器应用程序中的工作方式几乎相同：
-
left: 左对齐文本。 -
right: 右对齐文本。 -
center: 居中文字 -
justify: 使文本展开，改变单词之间的差距，使所有文本行的宽度相同。你需要仔细使用，它可以看起来很可怕。特别是当应用于其中有很多长单词的段落时。如果你要使用这个，你也应该考虑一起使用别的东西，比如hyphens，打破一些更长的词语。
2.行高
line-height 属性设置文本每行之间的高，可以接受大多数单位 length and size units，不过也可以设置一个无单位的值，作为乘数，通常这种是比较好的做法。无单位的值乘以 font-size 来获得 line-height。
3.字母和单词间距
letter-spacing 和 word-spacing 属性允许你设置你的文本中的字母与字母之间的间距、或是单词与单词之间的间距。你不会经常使用它们，但是可能可以通过它们，来获得一个特定的外观，或者让较为密集的文字更加可读。它们可以接受大多数单位 length and size units.
其他属性
以上属性让你了解如何开始在网页上设置文本， 但是你可以使用更多的属性。我们只是想介绍最重要的。一旦你习惯使用上面的内容，你还应该探索以下几点：
Font 样式:
-
font-variant: 在小型大写字母和普通文本选项之间切换。 -
font-kerning: 开启或关闭字体间距选项。 -
font-feature-settings: 开启或关闭不同的 OpenType 字体特性。 -
font-variant-alternates: 控制给定的自定义字体的替代字形的使用。 -
font-variant-caps: 控制大写字母替代字形的使用。 -
font-variant-east-asian: 控制东亚文字替代字形的使用, 像日语和汉语。 -
font-variant-ligatures: 控制文本中使用的连写和上下文形式。 -
font-variant-numeric: 控制数字，分式和序标的替代字形的使用。 -
font-variant-position: 控制位于上标或下标处，字号更小的替代字形的使用。 -
font-size-adjust: 独立于字体的实际大小尺寸，调整其可视大小尺寸。 -
font-stretch: 在给定字体的可选拉伸版本中切换。 -
text-underline-position: 指定下划线的排版位置，通过使用text-decoration-line属性的underline值。 -
text-rendering: 尝试执行一些文本渲染优化。
文本布局样式：
-
text-indent: 指定文本内容的第一行前面应该留出多少的水平空间。 -
text-overflow: 定义如何向用户表示存在被隐藏的溢出内容。 -
white-space: 定义如何处理元素内部的空白和换行。 -
word-break: 指定是否能在单词内部换行。 -
direction: 定义文本的方向 (这取决于语言，并且通常最好让HTML来处理这部分，因为它是和文本内容相关联的。) -
hyphens: 为支持的语言开启或关闭连字符。 -
line-break: 对东亚语言采用更强或更弱的换行规则。 -
text-align-last: 定义一个块或行的最后一行，恰好位于一个强制换行前时，如何对齐。 -
text-orientation: 定义行内文本的方向。 -
word-wrap: 指定浏览器是否可以在单词内换行以避免超出范围。 -
writing-mode: 定义文本行布局为水平还是垂直，以及后继文本流的方向。
Font简写
许多字体的属性也可以通过 font 的简写方式来设置 . 这些是按照以下顺序来写的： font-style, font-variant, font-weight, font-stretch, font-size, line-height, and font-family.
如果你想要使用 font 的简写形式，在所有这些属性中，只有 font-size 和 font-family 是一定要指定的。
font-size 和 line-height 属性之间必须放一个正斜杠。
一个完整的例子如下所示：
font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;
