CSS 中文本和字体

一. 文本

1.1 文本颜色

color 属性用于设置文本的颜色。颜色由以下值指定：

• 颜色名 - 比如 red

• 十六进制值 - 每个颜色的最低值为 0(十六进制为 00)，最高值为 255(十六进制为FF)。写法为 # 号后跟三个或六个十六进制字符。

• RGB 值 - 比如 rgb(255, 0, 0) 每个参数定义颜色的强度，可以是介于 0 与 255 之间的整数，或者是百分比值（从 0% 到100%）

1.2 文本对齐

text-align 属性用于设置文本的水平对齐方式

text-align: center;（居中对齐）
text-align: left;  （居左对齐）
text-align: right; （居右对齐）
text-align: justify;（拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的）

1.3 垂直对齐

vertical-align 属性设置元素的垂直对齐方式。

vertical-align常用属性值

1. baseline：默认值，元素放置在父元素的基线上。
2. top：把元素的顶端与行中最高元素的顶端对齐；
3. middle：把此元素放置在父元素的中部。
4. bottom：把元素的顶端与行中最低的元素的顶端对齐。

vertical-align: top;     （顶端对齐）
vertical-align: middle;  （中部对齐）
vertical-align: bottom;  （底部对齐）
vertical-align: baseline;（基线对齐）

1.4 文本装饰

text-decoration 属性用于设置或删除文本装饰。

text-decoration: none;        （删除下划线）
text-decoration: overline;    （上划线）
text-decoration: line-through;（删除线）
text-decoration: underline;   （下划线）

1.5 文本缩进

text-indent 属性用于指定文本第一行的缩进。

text-indent: 2em;（缩进两个字体长度）

1.6 字符间距

letter-spacing 属性用于指定文本中字符之间的间距。

letter-spacing: 12px;（字符间有12像素的间距）

1.7 文本阴影

text-shadow 属性为文本添加阴影。

text-shadow: 2px（水平阴影）2px（垂直阴影）5px（模糊效果）red;（向阴影添加颜色）

二. 字体

2.1 font-family属性

font-family 属性应包含多个字体名称作为备用字体，以确保浏览器/操作系统之间的最大兼容性。字体名称应以逗号分隔。
注：如果字体名称不止一个单词，则必须用引号引起来，例如：“Times New Roman”。

2.2 字体样式

font-style 属性主要用于指定斜体文本。

font-style: normal;（文本正常显示）
ont-style: italic; （文本以斜体显示）

2.3 字体粗细

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

font-weight: normal;（文本正常显示）
font-weight: bold;  （文本加粗显示）

2.4 字体大小

font-size 属性设置文本的大小。

font-size 值可以是绝对或相对大小。

绝对尺寸：

• 将文本设置为指定大小

• 不允许用户在所有浏览器设置中更改文本大小（可访问性不佳）

• 当输出的物理尺寸已知时，绝对尺寸很有用

相对尺寸：

• 设置相对于周围元素的大小

• 允许用户在浏览器中更改文本大小

注：如果未指定字体大小，则普通文本（如段落）的默认大小为 16px（16px = 1em）。

以像素设置字体大小

• 使用像素设置文本大小可以完全控制文本大小：

• 如果你使用了像素，则仍然可以使用缩放工具来调整整个页面的大小。（但文本大小不会随着页面大小改变而改变）

以em设置字体大小

• W3C 建议使用 em 尺寸单位。

• 1em 等于当前字体大小。浏览器中的默认文本大小为 16px。因此，默认大小 1em 为 16px。

响应式字体大小

可以使用 vw 单位设置文本大小，它的意思是“视口宽度”。

这样，文本大小将遵循浏览器窗口的大小。当调整浏览器窗口的大小时，字体大小将会缩放。

注：视口（Viewport）是浏览器窗口的大小。 1vw = 视口宽度的 1％。