css文字制作

CSS 文字样式设计

字体设置
使用 font-family 定义字体，优先指定系统安全字体或引入网络字体（如 Google Fonts）。

.text {
  font-family: 'Arial', sans-serif;
}

字号与行高
通过 font-size 调整字号，line-height 控制行间距，建议使用相对单位（如 rem）。

.text {
  font-size: 1.2rem;
  line-height: 1.5;
}

颜色与透明度
使用 color 设置文字颜色，opacity 或 rgba() 控制透明度。

.text {
  color: #333;
  opacity: 0.8;
}

CSS 文字特效

阴影效果
text-shadow 可为文字添加阴影，参数依次为水平偏移、垂直偏移、模糊半径和颜色。

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

渐变文字
结合背景渐变与 background-clip 实现渐变文字效果。

.text {
  background: linear-gradient(to right, #ff8a00, #da1b60);
  -webkit-background-clip: text;
  color: transparent;
}

描边效果
通过 -webkit-text-stroke 添加描边（仅部分浏览器支持）。

.text {
  -webkit-text-stroke: 1px black;
}

CSS 文字布局

对齐与间距
text-align 控制对齐方式，letter-spacing 和 word-spacing 调整字符与单词间距。

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

换行与溢出
white-space 处理空白符，text-overflow 定义溢出文本显示方式。

.text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

多列布局
column-count 和 column-gap 实现文字分栏效果。

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

CSS 动态效果

悬停交互
通过 :hover 伪类改变文字样式，增强交互性。

.text:hover {
  color: red;
  transform: scale(1.1);
}

动画效果
使用 @keyframes 创建文字动画，如颜色渐变或位移。

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.text {
  animation: fadeIn 2s ease-in-out;
}