CSS（3）CSS文本控制：字体样式与文本布局

参考资料: houdunren文本控制、MDN基本文本和字体样式

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

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

1. 字体种类

最简单的使用方法：

p {
  font-family: Helvetica, Arial, sans-serif;
}

如果字体不可用，那么就会用浏览器默认的字体代替 default font.
网页安全字体：某几个字体通常可以应用到所有系统，因此可以毫无顾忌地使用。
字体栈 (font stack)：定义多个字体，系统会依次查找，没有用引号的是无效的。

font-family: 'Courier New', Courier, monospace;

不建议使用中文字体，因为文件太大且大部分是商业字体（需要版权）。

@font-face方法

@font-face 是一个CSS@规则，它允许网页开发者为其网页指定在线字体。通过这种作者自备字体的方式，@font-face 可以消除对用户电脑字体的依赖。 @font-face 不仅可以放在在CSS的最顶层, 也可以放在 @规则的条件规则组中。
语法：

<style>
  @font-face {
    font-family: "houdunren";
    src: url("SourceHanSansSC-Light.otf") format("opentype"),
         url("SourceHanSansSC-Heavy.otf") format("opentype");
  }

  span {
    font-family: 'houdunren';
  }
</style>

字体	格式
.otf	opentype
.woff	woff
.ttf	truetype
.eot	Embedded-opentype

参考：真正了解CSS3背景下的@font face规则

Font 简写

许多字体的属性也可以通过 font 的简写方式来设置 .

p{
  font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;
}

按照以下顺序来写： font-style, font-variant, font-weight, font-stretch, font-size, line-height, and font-family.

font-size 和 font-family 是一定要指定的。
font-size 和 line-height 属性之间必须放一个正斜杠。

2. 字体颜色、大小、样式、粗细、转化、装饰、阴影

p {
  color: red;
  font-size: 10px; // em, rem;
  font-style: normal; // italic, oblique
  font-weight
}

2.1 颜色

字符串颜色：可以使用如 red, green 等字符颜色声明
使用十六进制网页颜色：color:#ddffde
如果颜色字符相同如 #dddddd 可以简写为 #ddd
使用RGB颜色：例如：color:rgb(38, 149, 162);
透明颜色：透明色从 0~1 间，表示透明到不透明，例：color:rgba(38, 149, 162,.2);

2.2 大小

2.2.1单位

px : 像素值，一个绝对单位。
em: 1em 等于我们设计的当前元素的父元素上设置的字体大小。常用于首行缩进。
rem: 效果和 em 差不多。1rem 等于 HTML 中的根元素的字体大小， (i.e. <html>) ，而不是父元素。rem 不支持 Internet Explorer 8 和以下的版本，如果你的项目需要支持较老的浏览器，你可以坚持使用em 或 px, 或者是 polyfill 就像 REM-unit-polyfill.

2.2.2 百分数

百分数是子元素相对于父元素的大小，如父元素是20px，子元素设置为 200%即为你元素的两倍大小。

2.3 字体样式（倾斜）

font-style: 用来打开和关闭文本 italic (斜体)。可能的值如下 (你很少会用到这个属性，除非你因为一些理由想将斜体文字关闭斜体状态)：
- normal: 将文本设置为普通字体 (将存在的斜体关闭)
- italic: 如果当前字体的斜体版本可用，那么文本设置为斜体版本；如果不可用，那么会利用 oblique 状态来模拟 italics。
- oblique: 将文本设置为斜体字体的模拟版本，也就是将普通文本倾斜的样式应用到文本中。

2.4 字体粗细

font-weight: 设置文字的粗体大小。这里有很多值可选 (比如 -light, -normal, -bold, -extrabold, -black, 等等), 不过事实上你很少会用到 normal 和 bold以外的值：
- normal, bold: 普通或者加粗的字体粗细
- lighter, bolder: 将当前元素的粗体设置为比其父元素粗体更细或更粗一步。100–900: 数值粗体值，如果需要，可提供比上述关键字更精细的粒度控制。
- 400对应 normal, 700 对应 bold ）

2.5 文本转化

text-transform: 允许你设置要转换的字体。值包括：
- none: 防止任何转型。
- uppercase: 将所有文本转为大写。
- lowercase: 将所有文本转为小写。
- capitalize: 转换所有单词让其首字母大写。
- full-width: 将所有字形转换成全角，即固定宽度的正方形，类似于等宽字体，允许拉丁字符和亚洲语言字形（如中文，日文，韩文）对齐。

2.6 文本装饰

text-decoration: 设置/取消字体上的文本装饰 (你将主要使用此方法在设置链接时取消设置链接上的默认下划线。) 可用值为：
- none: 取消已经存在的任何文本装饰。
- underline: 文本下划线
- 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.

2.7 阴影

参数顺序为：阴影颜色，水平偏移，垂直偏移，阴影模糊度。

<style>
  h2 {
    text-shadow: rgba(13, 6, 89, 0.8) 3px 3px 5px;
  }
</style>

3. 文本布局

3.1 文本对齐

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

left: 左对齐文本。
right: 右对齐文本。
center: 居中文字
justify: 使文本展开，改变单词之间的差距，使所有文本行的宽度相同。你需要仔细使用，它可以看起来很可怕。特别是当应用于其中有很多长单词的段落时。如果你要使用这个，你也应该考虑一起使用别的东西，比如 hyphens，打破一些更长的词语。

3.2 行高

line-height 属性设置文本每行之间的高，可以接受大多数单位 length and size units，不过也可以设置一个无单位的值，作为乘数，通常这种是比较好的做法。无单位的值乘以 font-size 来获得 line-height。

3.3 字母和单词间距

p {
  letter-spacing: 2px;
  word-spacing: 4px;
}

3.4 其他一些值得看一下的属性

以上属性让你了解如何开始在网页上设置文本，但是你可以使用更多的属性。我们只是想介绍最重要的。一旦你习惯使用上面的内容，你还应该探索以下几点：

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: 定义文本行布局为水平还是垂直，以及后继文本流的方向。

4. 不换行的应用

使用 white-space 控制文本空白显示。

pre 保留文本中的所有空白，类似使用 pre 标签
nowrap 禁止文本换行
pre-wrap 保留空白，保留换行符
pre-line 空白合并，保留换行符
溢出文本容器后换行处理，溢出添加 ...，需要将overflow 设置在 text-overflow 前面。

h2 {
  width: 100px;
  border: solid 1px #ddd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}