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;
  }
}