CSS制作文字
CSS 文字样式基础
字体属性
使用 font-family 定义字体类型，优先使用系统安全字体或通过 @font-face 引入自定义字体：
p {
font-family: "Helvetica Neue", Arial, sans-serif;
}字号与粗细font-size 控制文字大小，font-weight 调节粗细（100-900 或 bold/normal）：
h1 {
font-size: 2rem;
font-weight: 700;
}颜色与透明度
通过 color 设置文字颜色，支持十六进制、RGB 或 HSL 格式。opacity 调整整体透明度：
span {
color: #FF5733;
opacity: 0.8;
}文字装饰与对齐
文本装饰text-decoration 添加下划线、删除线等效果，text-shadow 创建阴影：
a {
text-decoration: underline;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}对齐与间距text-align 控制水平对齐方式，line-height 调整行间距：
div {
text-align: center;
line-height: 1.6;
}字母与单词间距letter-spacing 和 word-spacing 分别调整字母间和单词间的距离：
blockquote {
letter-spacing: 1px;
word-spacing: 0.2em;
}高级文字效果
文字截断与溢出
单行文本溢出显示省略号：
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}多列文本布局column-count 和 column-gap 实现分栏效果：
article {
column-count: 2;
column-gap: 20px;
}自定义字体引入
通过 @font-face 加载网络字体：
@font-face {
font-family: 'CustomFont';
src: url('font.woff2') format('woff2');
}
body {
font-family: 'CustomFont';
}响应式文字处理
视口单位适配
使用 vw 或 vh 单位实现根据视口大小自动调整字号：
h2 {
font-size: calc(16px + 1vw);
}媒体查询优化
针对不同屏幕尺寸设置不同文字样式：
@media (max-width: 768px) {
p {
font-size: 14px;
line-height: 1.4;
}
}
