css 文本制作

使用CSS制作文本样式

字体样式
通过font-family设置字体类型，font-size调整大小，font-weight控制粗细。例如：

.text {
  font-family: "Arial", sans-serif;
  font-size: 16px;
  font-weight: bold;
}

颜色与背景
使用color定义文本颜色，background-color添加背景色。支持十六进制、RGB或HSL值：

.text {
  color: #333333;
  background-color: rgba(255, 255, 0, 0.2);
}

间距与对齐
line-height调整行高，letter-spacing设置字符间距，text-align控制对齐方式：

.text {
  line-height: 1.5;
  letter-spacing: 1px;
  text-align: center;
}

文本装饰与特效

下划线与删除线
通过text-decoration添加装饰线，支持多种组合：

.text {
  text-decoration: underline wavy red; /* 波浪下划线 */
}

阴影效果
text-shadow创建阴影，参数依次为水平偏移、垂直偏移、模糊半径和颜色：

.text {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

溢出处理
text-overflow控制文本溢出时的显示方式，需配合white-space和overflow使用：

.text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 显示省略号 */
}

高级排版特性

自定义字体
通过@font-face引入外部字体文件：

@font-face {
  font-family: "CustomFont";
  src: url("path/to/font.woff2") format("woff2");
}
.text {
  font-family: "CustomFont";
}

多列布局
column-count和column-gap实现文本分栏：

.text {
  column-count: 3;
  column-gap: 20px;
}

首字下沉
使用::first-letter伪元素实现首字母特殊样式：

.text::first-letter {
  font-size: 3em;
  float: left;
  line-height: 0.8;
}