知识库

Appearance

Return to top
On this page

CSS 字体与文本

CSS 字体和文本属性用于控制文本的外观和布局。

概述

字体和文本样式是网页设计中最重要的视觉元素之一。

字体属性

font-family

指定字体族：

css
.element {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-family: Georgia, "Times New Roman", serif;
  font-family: "Courier New", Courier, monospace;
  font-family: system-ui, sans-serif; /* 使用系统默认字体 */
}

font-size

设置字体大小：

css
.element {
  font-size: 16px; /* 像素值 */
  font-size: 1.2em; /* 相对于父元素字体大小 */
  font-size: 1.5rem; /* 相对于根元素字体大小 */
  font-size: 100%; /* 百分比 */
  font-size: 1.2vw; /* 视口宽度的百分比 */
}

font-weight

设置字体粗细：

css
.element {
  font-weight: normal; /* 正常 */
  font-weight: bold; /* 粗体 */
  font-weight: 100; /* 数值，100-900 */
  font-weight: bolder; /* 相对于父元素更粗 */
  font-weight: lighter; /* 相对于父元素更细 */
}

font-style

设置字体样式：

css
.element {
  font-style: normal; /* 正常 */
  font-style: italic; /* 斜体 */
  font-style: oblique; /* 伪斜体 */
}

font-variant

设置字体变体：

css
.element {
  font-variant: normal;
  font-variant: small-caps; /* 小型大写字母 */
}

font 简写属性

css
.element {
  font: bold 16px/1.4 "Helvetica Neue", Arial, sans-serif;
  /* weight size/line-height family */
}

文本属性

color

设置文本颜色：

css
.element {
  color: #333;
  color: rgba(0, 0, 0, 0.8);
}

text-align

设置文本对齐方式：

css
.element {
  text-align: left; /* 左对齐 */
  text-align: right; /* 右对齐 */
  text-align: center; /* 居中 */
  text-align: justify; /* 两端对齐 */
  text-align: start; /* 逻辑开始位置 */
  text-align: end; /* 逻辑结束位置 */
}

text-decoration

设置文本装饰：

css
.element {
  text-decoration: underline; /* 下划线 */
  text-decoration: overline; /* 上划线 */
  text-decoration: line-through; /* 删除线 */
  text-decoration: none; /* 无装饰（常用于链接） */
}

text-transform

设置文本转换：

css
.element {
  text-transform: uppercase; /* 大写 */
  text-transform: lowercase; /* 小写 */
  text-transform: capitalize; /* 首字母大写 */
  text-transform: none; /* 无转换 */
}

text-indent

设置文本缩进：

css
.element {
  text-indent: 2em; /* 首行缩进 */
}

letter-spacing

设置字母间距：

css
.element {
  letter-spacing: 1px; /* 增加间距 */
  letter-spacing: -0.5px; /* 减少间距 */
}

word-spacing

设置单词间距：

css
.element {
  word-spacing: 2px;
}

line-height

设置行高：

css
.element {
  line-height: 1.5; /* 相对值 */
  line-height: 24px; /* 固定值 */
  line-height: 150%; /* 百分比 */
}

现代字体特性

字体加载

css
@font-face {
  font-family: 'CustomFont';
  src: url('custom-font.woff2') format('woff2'),
       url('custom-font.woff') format('woff');
  font-display: swap; /* 优化字体加载 */
}

可变字体

css
.variable-font {
  font-variation-settings: 'wght' 400, 'wdth' 100;
  /* 支持连续变化的字体特性 */
}

字体回退

css
.fallback-fonts {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 
               'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 
               'Open Sans', 'Helvetica Neue', sans-serif;
}

文本布局

white-space

控制空白符处理：

css
.element {
  white-space: normal; /* 默认 */
  white-space: nowrap; /* 不换行 */
  white-space: pre; /* 保留空白符，不换行 */
  white-space: pre-wrap; /* 保留空白符，允许换行 */
  white-space: pre-line; /* 合并空白符，保留换行 */
}

word-wrap / overflow-wrap

控制长单词换行：

css
.element {
  overflow-wrap: normal; /* 默认 */
  overflow-wrap: break-word; /* 允许长单词换行 */
}

word-break

控制换行方式：

css
.element {
  word-break: normal; /* 默认 */
  word-break: break-all; /* 允许任意位置换行 */
  word-break: keep-all; /* 防止词内换行 */
}

文本效果

text-shadow

设置文本阴影：

css
.text-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  /* x偏移 y偏移 模糊半径 颜色 */
}

text-overflow

控制溢出文本显示：

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

响应式排版

流体排版

css
.fluid-typography {
  font-size: clamp(1rem, 2.5vw, 2rem);
  /* 最小值，首选值，最大值 */
}

视口单位

css
.viewport-typography {
  font-size: calc(16px + 0.5vw);
  /* 结合固定值和视口值 */
}

实用技巧

垂直居中文本

css
.vertical-center {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

防止字体闪烁

css
.font-display {
  font-display: swap; /* 在 @font-face 中使用 */
}

美化选择文本

css
::selection {
  background: #007cba;
  color: white;
}

可访问性考虑

字体大小

使用相对单位以支持缩放：

css
.accessible-text {
  font-size: 1.2rem; /* 使用 rem 而非 px */
}

行高

确保足够的行高以提高可读性：

css
.readable-text {
  line-height: 1.5; /* 推荐值 */
}

颜色对比

确保文本与背景有足够的对比度：

css
.high-contrast {
  color: #333;
  background-color: #fff;
}

最佳实践

  • 使用 web 安全字体作为回退
  • 优先使用相对单位而非绝对单位
  • 确保良好的可读性和可访问性
  • 优化字体加载性能
  • 考虑不同语言的排版需求
  • 使用系统字体以提高性能