CSS 属性
2025-02-17
文本相关属性
字体属性（Font）
1. font-family（字体系列）
p {
/* 按优先级排序，如果第一个字体不可用，则使用第二个，以此类推 */
font-family: "Microsoft YaHei", Arial, sans-serif;
}2. font-size（字体大小）
/* 常用的字体大小设置方式 */
.text {
font-size: 16px; /* 像素 */
font-size: 1.2em; /* 相对于父元素的倍数 */
font-size: 1.2rem; /* 相对于根元素的倍数 */
font-size: 120%; /* 百分比 */
}3. font-weight（字体粗细）
.text {
font-weight: normal; /* 正常粗细 */
font-weight: bold; /* 粗体 */
font-weight: 400; /* 正常 */
font-weight: 700; /* 加粗 */
}4. font-style（字体样式）
.text {
font-style: normal; /* 正常 */
font-style: italic; /* 斜体 */
font-style: oblique; /* 倾斜体 */
}5. font 复合写法
/* 顺序：font-style font-weight font-size/line-height font-family */
.text {
font: italic bold 16px/1.5 "Microsoft YaHei", Arial;
}文本属性（Text）
1. color（文本颜色）
.text {
color: red; /* 颜色关键字 */
color: #ff0000; /* 十六进制 */
color: rgb(255,0,0); /* RGB */
color: rgba(255,0,0,0.5); /* RGBA带透明度 */
}2. text-align（文本对齐）
.text {
text-align: left; /* 左对齐 */
text-align: center; /* 居中对齐 */
text-align: right; /* 右对齐 */
text-align: justify; /* 两端对齐 */
}3. text-decoration（文本装饰）
.text {
text-decoration: none; /* 无装饰 */
text-decoration: underline; /* 下划线 */
text-decoration: line-through; /* 删除线 */
text-decoration: overline; /* 上划线 */
}4. text-indent（首行缩进）
.text {
text-indent: 2em; /* 缩进2个文字大小 */
text-indent: 20px; /* 缩进20像素 */
}5. line-height（行高）
.text {
line-height: 1.5; /* 1.5倍行高 */
line-height: 20px; /* 固定行高 */
line-height: 150%; /* 相对于字体大小的百分比 */
}文本溢出处理
1. 单行文本溢出显示省略号
.single-line {
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 溢出隐藏 */
text-overflow: ellipsis; /* 显示省略号 */
}2. 多行文本溢出显示省略号
.multi-line {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 显示行数 */
overflow: hidden;
}建议
字体设置
- 始终指定后备字体
- 中文字体放在英文字体前面
- 常用字体大小：12px-14px(正文)，16px-24px(标题)
行高设置
- 正文内容建议使用1.5-1.8的行高
- 标题文字可以使用较小的行高，如1.3
文本对齐
- 中文文本建议使用左对齐
- 数字和英文内容可以考虑使用居中对齐
性能优化
- 避免使用过多的文本阴影效果
- 合理使用文本缩进
- 适当使用复合属性写法
响应式设计
- 使用相对单位(em, rem)替代固定单位(px)
- 设置合适的文本溢出处理方案