CSS字体和文本相关

一前言

目前在做IFE的练习，初步学习到CSS内容，所以做了总结。
本博文主要分为两部分，第一部分介绍CSS字体属性，第二部分则介绍了文本常用属性

二字体属性

2.1 字体系列

S1 首先介绍一下什么是字体系列:

所谓字体系列,我理解的就同一字体下 的不同风格的具体字体的集合。通俗类比一下，我们知道楷书下有不同风格的字体，比如颜体、柳体、瘦金体等等，这些是具体的不同风格的字体。但是，他们都属于楷体，只是具体的细节有差异。这里的楷体，就可以看做

是一个单独的字体系列。

S2 接下来介绍，CSS预定义的5种通用字体系列
Serif字体: 有修饰性的衬线（修饰线条），而且字符之间是成比例的（宽度不一致）;
Sans-serif字体: 没有衬线，字符成比例;
monospace字体: 每个字符具有相同宽度的字体，通常用于代码列表;
Cursive字体: 模拟人类笔迹的字体，具有流动的连接笔画;
Fantasy字体: 装饰性的各种 “浮夸” 字体

S3 定义字体系列的方法
使用font-family属性来定义字体系列
A1 可以指定一个通用字体系列;
A2 可以指定一个具体的字体系列，注意当该具体字体系列在客户端不可用时，浏览器会使用默认设置字体显示;
所以，最好的方法是，结合特定字体名和通用字体系列，以实现平稳退化原则

S4 特别注意
如果一个字体名中有一个/多个空格/特殊字符如#、$之类的，需要用引号声明字体，如下代码例子:

    p { font-family: "Trebuchet MS", Verdana, sans-serif; }

网页安全字体
关于网页安全字体的概念，参见MDN基本文本和字体样式;

2.2 字体加粗

S1 首先介绍字体加粗属性font-weight
A1 值是关键字/100~900的整百数值，
一般情况下，400≈normal / 700≈bold，
关于数值加粗的原理，详情见 CSS权威指南P109 ,真正用的时候，一般直接用数值试一试即可

A2 具有继承性

S2 bolder/lighter属性值的原理
A1 确定继承自父元素的font-weight值;
A2 选取比继承的font-weight对应值 + 更粗一级数值中的 + 最小的数值;
A3 如果继承的font-weight值已经是最大900/最小100，那么bolder/lighter值保持不变

2.3 字体大小

S1 首先介绍字体大小属性font-size
A1 值可以是关键字/ length / percentage / em / rem
关键字: 实际开发中很少使用
em/百分比: 根据父元素的字体大小计算， 1em = 当前元素的父元素上设置的字体大小
因为具有继承性，所以可能会导致缩放失控，比如:
A 祖先元素:12px;
B 父元素: 120%, 即 12 * 1.2 = 14.4px(可能会取整);
C 子元素: 135%, 即 14.4 * 1.35 = 19.44px

rem: 1rem 等于 HTML 中的根元素的字体大小,推荐使用

A2 具有继承性

S2 明确一个重要概念:
A1 每种字体的字符设计大小一般都等于小于其模板框em框大小;
A2 font-size的作用就是设置给定字体的em框的大小，而不能保证实际显示的字符大小

简而言之，就是font-size负责的是模具的大小，而不是真正实际字符的大小

2.4 字体风格和变形

S1 字体风格属性font-style
A1 值可以是 normal / italic/oblique (通常两者效果是一样的，都是斜体)

S2 字体变形属性font-variant
A1 值可以是 small-caps, 用于创建小型大写字母文本（具体效果见CSS权威指南P124）

S3 字体拉伸属性font-stretch，了解即可
S4 字体大小调整属性font-size-adjust，了解即可

2.5 字体相关属性简写

S1 所有字体属性的集合属性font
A1 一般值是 font-style/font-weight/font-variant(可交换顺序) + font-sieze + font-family

A2 值还可以是 line-height （不推荐合并写，不利于维护）

A3 值还可以是 caption/icon/menu等系统字体设置，可以创造出和默认操作系统一样的字体效果 (见P131)

S2 特别注意，所有未显式赋值的font值，都会被浏览器自动赋予默认值

2.6 字体匹配过程

S1 具体过程了解即可，见P132-133

三、文本属性

3.1 缩进和水平对齐

S1 文本缩进属性text-indent
A1 值可以是 length / em/百分比 (相对于包含块的宽度值)
其中，值的长度可以是负值，从而创造出“悬挂缩进的效果”

A2 应用于块级元素，无法应用于行内元素&替换元素(如果想要行内元素有缩进效果，可以使用左内边距/外边距)

A3 缩进只应用于一个块级元素的第一行内容

A4 具有继承性

S2 文本水平对齐属性text-align
A1 值可以是 left / center /right / justify
其中，justify表示两端对齐文本 (P140)

A2 应用于块级元素
A3 具有继承性

3.2 行高

S1 什么是line-height属性
A1 指的是文本行之间的最小基线距离，换言之，文本行间的距离可能比line-height值更大
A2 行间距 = line-height值 - font-size值

S2 理解行内元素高度如何确定(并不绝对精确，只是大概情况)
A1 font-size值，确定了内容区大小;
A2 line-height值，确定了行内框高度;
A3 行框（从最高行内框的顶部到最低行内框的底部），确定了一行行内元素的高度

S3 属性特点
A1 值可能是 length / em / number / normal
normal值，通常情况下是字体大小的 1.2倍 (font-size * 1.2)
em/百分比，相对于的是元素的字体大小(注意，不是父元素的字体大小，只有没有显式继承该元素的fz,才会根据fz继承性向上找)

A2 可以应用于所有元素 (对于块级元素和内联元素的区别，详见其他博文)

A3 可以继承
因为具有继承性，所以可能会有以下情况: 继承的div元素的line-height值小于显式设置的fz值，导致拥挤
解决方法是，使用number作为“继承因子”，这样各个元素都会根据自己的fz值，来计算line-height值了

3.3 垂直对齐

S1 文本垂直对齐属性 vertical-align
A1 值可以是 middle/bottom等关键字 length / em/百分比 (相对于该元素的line-height值)
A2 应用于行内元素和替换元素(图像/表单等)
A3 不可以继承
A4 注意，所有垂直对齐的元素都会影响行高，换句话说，一行元素的行高会包含住垂直对齐的高度

S2 基线对齐情况
A1 对行内元素，基线对齐是指：元素的基线与其父元素的基线对齐;
A2 对替换元素，基线对齐是指：元素的底端与其父元素的基线对齐（因为替换元素压根就没有基线）
这就会导致，可能图像下方会出现一段空白的问题

A3 百分比/em 对齐情况
会把行内元素的基线 /替换元素的底边，相对于父元素的基线升高/降低数值

S3 居中对齐情况
A1 对middle值，指的是：元素行内框的中点与其父元素基线上方0.5ex处的一个点对齐;

S4 顶端/底端对齐情况
A1 对bottom值，指的是：元素行内框的底部与其所属行框的底部对齐;
A2 对text-bottom值，指的是: 对行内元素的行内文本内容区对齐 + 对替换元素无效

3.4 字间隔和字母间隔

S1 字间隔属性 word-spacing
A1 值可以是 length / em / normal
A2 应用于所有元素
A3 用于修改字和字之间的距离，了解即可

S2 字母间隔属性 letter-spacing
A1 值可以是 length / em / normal
A2 应用于所有元素
A3 可以用来制造出突出强调的效果 (见P152)

3.5 文本转换

S1 文本大小写转换属性 text-transform
A1 值可以是 uppercase等关键字
A2 应用于所有元素

3.6 文本装饰

S1 文本装饰线属性 text-decoration
A1 值可以是 underline等关键字
A2 应用于所有元素
A3 不可以继承,但可以覆盖下划线样式（P158）

3.7 文本阴影

S1 文本阴影属性 text-shadow
A1 值可以是 color + 右偏移长度 + 下偏移长度 + [模糊半径]
A2 应用于所有元素
A3 不可以继承

S2 可以实现多重阴影

3.8 其他

S1 文本空白符和换行属性 white-space
A1 值可以是 pre / nowrap / pre-wrap / pre-line
值为pre时：保留HTML内容中的空格
值是nowrap: 阻止元素内的文本换行

A2 应用于所有元素
A3 不可以继承
A4 具体表格见 P162

四、参考文档

1 CSS权威指南;
2 MDN的基本文本和字体样式;
3 CSS 文本;
4 CSS 字体;