CSS文本制作题

CSS文本样式基础

使用font-family属性设置字体，例如font-family: Arial, sans-serif;。font-size控制字号，如font-size: 16px;。color定义文本颜色，例如color: #333;。

font-weight调整字体粗细，取值如normal或bold。font-style设置斜体，如italic。text-decoration添加下划线或删除线，例如text-decoration: underline;。

文本对齐与间距

text-align控制对齐方式，如center或justify。line-height设置行间距，例如line-height: 1.5;。letter-spacing调整字符间距，如letter-spacing: 1px;。

word-spacing控制单词间距，例如word-spacing: 2px;。text-indent设置首行缩进，如text-indent: 2em;。white-space处理空白字符，例如white-space: nowrap;。

高级文本效果

text-shadow添加阴影效果，例如text-shadow: 2px 2px 4px rgba(0,0,0,0.5);。text-transform转换大小写，如uppercase或capitalize。direction控制文本方向，例如direction: rtl;。

writing-mode设置书写模式，如vertical-rl。text-overflow处理溢出文本，例如text-overflow: ellipsis;。需要配合overflow: hidden和white-space: nowrap使用。

响应式文本设计

使用相对单位如em或rem确保可伸缩性。媒体查询调整不同屏幕尺寸下的文本样式：

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

vw和vh单位创建视口相关的文本大小。clamp()函数确保文本大小在范围内，例如font-size: clamp(1rem, 2.5vw, 2rem);。

自定义字体与图标

@font-face引入自定义字体：

@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');
}

使用图标字体如Font Awesome时，通过CSS的content属性添加图标。伪元素::before和::after可插入装饰性文本内容。