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可插入装饰性文本内容。






