css文本制作
使用CSS设置文本样式
字体属性
通过font-family可以指定文本字体，支持多个备选字体。font-size控制文字大小，单位可以是px、em或rem。font-weight调整粗细，取值范围100-900或关键字bold/normal。
.example {
font-family: "Helvetica Neue", Arial, sans-serif;
font-size: 1.2rem;
font-weight: 600;
}颜色与装饰
color属性定义文本颜色，支持十六进制、RGB或颜色名称。text-decoration添加下划线/删除线，text-shadow创建文字阴影效果。
.highlight {
color: #FF5733;
text-decoration: underline wavy;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}文本布局控制
对齐与间距
text-align控制水平对齐方式（left/right/center/justify）。line-height设置行间距，建议使用无单位数值。letter-spacing调整字符间距，word-spacing控制单词间距。
.article {
text-align: justify;
line-height: 1.6;
letter-spacing: 0.5px;
word-spacing: 2px;
}溢出处理
white-space决定空白处理方式，text-overflow配合overflow: hidden可显示省略号。word-break控制换行行为，适合多语言场景。
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
}高级文本效果
渐变文字
结合背景渐变和background-clip实现彩色文字效果。需要Webkit前缀支持部分浏览器。
.gradient-text {
background: linear-gradient(90deg, #FF8A00, #E52E71);
-webkit-background-clip: text;
color: transparent;
}文字描边
使用text-stroke属性或兼容性更好的-webkit-text-stroke实现轮廓效果。注意描边会改变文字实际占位尺寸。
.outlined {
-webkit-text-stroke: 1px black;
paint-order: stroke fill;
}变量字体
通过font-variation-settings调节可变字体的轴参数，实现动态字重/宽度变化。需使用支持VF的字体文件。
.variable-font {
font-family: 'Inter var';
font-variation-settings: 'wght' 650, 'slnt' -10;
}
