文本样式
警告
文本是无法直接通过 CSS 更改样式的，必须要用适合的标签包裹，本质是修改标签样式，里面文字跟随样式变化
字体样式
color
字体颜色
font-family
字体族
css
font-family: <字体1>, <字体2>, <字体3>, <通用字体族>;- 属性值
| 通用字体族 | 说明 | 特点 |
|---|---|---|
serif | 衬线字体 | 字体末端有小装饰，如宋体、Times New Roman |
sans-serif | 无衬线字体 | 字体线条简洁，如微软雅黑、Arial |
monospace | 等宽字体 | 每个字符宽度一致，如 Consolas、Courier New |
提示
网页开发建议使用无衬线字体
font-size
字体大小
设计规范
不同的浏览器的默认字体的大小不同，因此建议在body中声明网页使用的字体大小
font-style
font-style 是 CSS 用来设置字体样式（是否倾斜） 的属性
- 属性值
| 值 | 含义 | 说明 |
|---|---|---|
normal | 正常字体（默认值） | 文本直立显示 |
italic | 斜体 | 使用字体本身的斜体样式（若字体支持） |
oblique | 伪斜体 | 人工倾斜显示（即使字体不含斜体样式） |
- 使用场景
- 将
<em>和<i>标签自带的倾斜关闭
css
em {
font-style: normal;
}font-weight
字体粗细
- 属性值
| 属性值 | 含义 | 说明 |
|---|---|---|
normal | 正常字重 | 等同于 400 |
bold | 粗体 | 等同于 700 |
100 ~ 900 | 数值字重（步进100） | 从极细到极粗，400=正常，700=粗体 |
| 其他值 | 其他值受属性影响基本不用 |
- 使用场景
- 标题取消加粗
- 大批量文字加粗
text-decoration
text-decoration 是 CSS 中用于给文字添加装饰线（如下划线、删除线、上划线等）的属性。
- 属性值
| 属性值 | 说明 |
|---|---|
none | 取消文本装饰 |
underline | 下划线 |
overline | 上划线 |
line-through | 删除线 |
- 使用场景
- 删除链接的下划线，
- 添加价格的删除线
font
字体属性简写
css
font: [font-style] [font-variant] [font-weight] font-size[/line-height] font-family;font-size和font-family是必需的；其他属性可省略；
属性之间以空格分隔；
/用于分隔font-size与line-height。
文本布局
text-align
控制文本（行内元素）在他所在的块级元素内如何水平对齐
- 属性值
| 值 | 说明 | 示例 |
|---|---|---|
left | 左对齐（默认） | text-align: left; |
right | 右对齐 | text-align: right; |
center | 居中对齐 | text-align: center; |
justify | 两端对齐（自动调整字间距，实现文字即左对齐又右对齐） | text-align: justify; |
- 使用场景
- 文本/图片在盒子水平对齐
- 文章文字两端对齐
text-indent
设置块级元素中文行前面空格的缩进长度
- 常用属性
css
text-indent :2em;常见单位是em，相对单位，本元素的文字大小1em 等于当前元素的字体大小，如果当前元素没有大小，则按照父元素文字大小
letter-spacing
文本字符间距
- 常见属性值：数字
css
letter-spacing :2px;- 常见场景
- 顶部导航文字间距，按钮间距
line-height
行高
常见属性值：
值 说明 数字 px 行高 数字无单位` 当前字体大小的倍数 数字
常见场景
- 单行文本垂直居中
文本行高和字体大小相同，则该行的文本垂直居中
css
line-height:20px;
font-size:20px;- 调整行与行之间的距离
文本省略
单行文本省略
css
.ellipsis {
overflow: hidden; /* 超出隐藏 */
white-space: nowrap; /* 不换行 */
text-overflow: ellipsis; /* 文本超出显示省略号 */
}多行文本省略
css
.multi-ellipsis {
display: -webkit-box; /* 旧版弹性盒子模型 */
-webkit-box-orient: vertical; /* 垂直排列 */
-webkit-line-clamp: 2; /* 显示两行 */
overflow: hidden; /* 隐藏超出部分 */
text-overflow: ellipsis; /* 超出显示省略号 */
}-webkit-line-clamp可以配置行数，高度需要正好显示配置行的高度
警告
如果空间足够，则不会显示省略，因此请配置好高度