前端知识站

简体中文

English

简体中文

English

外观

2025-11-30
2393
11.2m

CSS 文本样式：让文字更具表现力与可读性 ​

文本是网页内容的核心载体。无论是新闻网站、博客还是电商平台，用户访问的主要目的都是阅读和获取信息。良好的文本样式不仅让内容更美观，更重要的是提升可读性，让用户能够轻松、舒适地获取信息。

想象一下两个场景：

  • 场景 A：一篇博客文章，字体太小，行间距过窄，段落拥挤在一起
  • 场景 B：同样的文章，字体大小适中，行间距舒适，段落层次分明

显然，场景 B 的阅读体验要好得多。CSS 提供了丰富的文本样式属性，让我们能够精确控制文字的呈现效果。

字体属性 ​

1. 字体族 (font-family) ​

font-family 定义元素使用的字体。由于不同操作系统和设备可用的字体不同，通常会指定一个字体列表作为备选方案。

css
/* 基础用法 */
body {
  font-family: Arial, Helvetica, sans-serif;
}

/* 中文网站常用字体栈 */
body {
  font-family: -apple-system, /* macOS 和 iOS 系统字体 */ BlinkMacSystemFont, /* macOS Chrome */
      "Segoe UI", /* Windows */ "PingFang SC", /* macOS 中文 */
      "Microsoft YaHei", /* Windows 中文 */ sans-serif; /* 通用无衬线字体 */
}

/* 标题使用不同字体 */
h1,
h2,
h3 {
  font-family: Georgia, "Times New Roman", serif;
}

/* 代码字体 */
code,
pre {
  font-family: "Courier New", Courier, monospace;
}

字体类型：

  1. 衬线字体 (Serif)：笔画末端有装饰，适合正式、传统场景

    css
    .formal-text {
  font-family: Georgia, "Times New Roman", serif;
}

  2. 无衬线字体 (Sans-serif)：现代、简洁，适合屏幕阅读

    css
    .modern-text {
  font-family: Arial, Helvetica, sans-serif;
}

  3. 等宽字体 (Monospace)：每个字符宽度相同，适合代码显示

    css
    .code-text {
  font-family: "Consolas", "Monaco", monospace;
}

使用 Web 字体（Google Fonts）：

html
<!-- 在 HTML 中引入 Google Fonts -->
<link
  href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap"
  rel="stylesheet"
/>
css
/* 在 CSS 中使用 */
body {
  font-family: "Roboto", sans-serif;
}

2. 字体大小 (font-size) ​

css
/* 使用像素（绝对单位） */
.small-text {
  font-size: 12px;
}

.normal-text {
  font-size: 16px;
}

.large-text {
  font-size: 24px;
}

/* 使用 em（相对于父元素） */
.relative-text {
  font-size: 1.5em; /* 父元素字体的 1.5 倍 */
}

/* 使用 rem（相对于根元素） */
.root-relative {
  font-size: 1.2rem; /* 根元素字体的 1.2 倍 */
}

/* 使用百分比 */
.percentage-size {
  font-size: 120%; /* 父元素字体的 120% */
}

/* 使用关键字 */
.keyword-size {
  font-size: larger; /* 可选：xx-small, x-small, small, medium, large, x-large, xx-large */
}

响应式字体大小：

css
:root {
  font-size: 14px; /* 移动设备基础字号 */
}

@media (min-width: 768px) {
  :root {
    font-size: 16px; /* 平板和桌面 */
  }
}

body {
  font-size: 1rem; /* 继承根元素字号 */
}

h1 {
  font-size: 2.5rem; /* 根据屏幕自动调整 */
}

h2 {
  font-size: 2rem;
}

p {
  font-size: 1rem;
}

3. 字体粗细 (font-weight) ​

css
/* 使用关键字 */
.light-text {
  font-weight: lighter;
}

.normal-text {
  font-weight: normal; /* 默认值，等同于 400 */
}

.bold-text {
  font-weight: bold; /* 等同于 700 */
}

.bolder-text {
  font-weight: bolder;
}

/* 使用数值（100-900） */
.thin-text {
  font-weight: 100; /* 极细 */
}

.regular-text {
  font-weight: 400; /* 正常 */
}

.medium-text {
  font-weight: 500; /* 中等 */
}

.semi-bold-text {
  font-weight: 600; /* 半粗 */
}

.bold-text {
  font-weight: 700; /* 粗体 */
}

.extra-bold-text {
  font-weight: 800; /* 特粗 */
}

实际应用：

css
/* 导航链接 */
.nav-link {
  font-weight: 500;
}

.nav-link.active {
  font-weight: 700; /* 激活状态加粗 */
}

/* 文章标题层级 */
h1 {
  font-weight: 800;
}

h2 {
  font-weight: 700;
}

h3 {
  font-weight: 600;
}

/* 强调文本 */
.highlight {
  font-weight: 700;
  color: #e74c3c;
}

4. 字体样式 (font-style) ​

css
/* 正常样式 */
.normal-style {
  font-style: normal;
}

/* 斜体 */
.italic-text {
  font-style: italic;
}

/* 倾斜（如果字体没有斜体版本，则倾斜显示） */
.oblique-text {
  font-style: oblique;
}

使用场景：

css
/* 引用文本 */
blockquote {
  font-style: italic;
  color: #555;
  border-left: 4px solid #ddd;
  padding-left: 20px;
}

/* 外文术语 */
.foreign-term {
  font-style: italic;
}

/* 强调内容 */
em {
  font-style: italic;
  font-weight: 500;
}

5. 字体简写 (font shorthand) ​

css
/* 完整语法：font-style font-weight font-size/line-height font-family */
.shorthand-font {
  font: italic 700 16px/1.5 Arial, sans-serif;
}

/* 最简形式（必须包含 size 和 family） */
.minimal-font {
  font: 16px Arial;
}

/* 带行高 */
.with-line-height {
  font: 16px/24px "Helvetica Neue", Arial, sans-serif;
}

文本属性 ​

1. 文本颜色 (color) ​

css
/* 使用颜色关键字 */
.text-blue {
  color: blue;
}

/* 使用十六进制 */
.text-custom {
  color: #2c3e50;
}

/* 使用 RGB */
.text-rgb {
  color: rgb(44, 62, 80);
}

/* 使用 RGBA（带透明度） */
.text-semi-transparent {
  color: rgba(0, 0, 0, 0.7);
}

/* 使用 HSL */
.text-hsl {
  color: hsl(210, 29%, 24%);
}

2. 文本对齐 (text-align) ​

css
/* 左对齐（默认） */
.align-left {
  text-align: left;
}

/* 右对齐 */
.align-right {
  text-align: right;
}

/* 居中对齐 */
.align-center {
  text-align: center;
}

/* 两端对齐 */
.align-justify {
  text-align: justify;
}

实际应用：

css
/* 标题居中 */
h1,
h2 {
  text-align: center;
}

/* 正文段落两端对齐（更整齐） */
article p {
  text-align: justify;
  text-justify: inter-word;
}

/* 右对齐的价格 */
.price {
  text-align: right;
  font-weight: 700;
}

3. 文本装饰 (text-decoration) ​

css
/* 无装饰（常用于去除链接下划线） */
a {
  text-decoration: none;
}

/* 下划线 */
.underline {
  text-decoration: underline;
}

/* 上划线 */
.overline {
  text-decoration: overline;
}

/* 删除线 */
.line-through {
  text-decoration: line-through;
}

/* 组合使用 */
.fancy-decoration {
  text-decoration: underline overline;
}

/* 设置装饰线样式 */
.dotted-underline {
  text-decoration: underline dotted #e74c3c;
}

.wavy-underline {
  text-decoration: underline wavy #3498db;
}

应用示例：

css
/* 链接样式 */
a {
  color: #3498db;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* 折扣价格 */
.original-price {
  text-decoration: line-through;
  color: #999;
}

.sale-price {
  color: #e74c3c;
  font-weight: 700;
}

4. 文本转换 (text-transform) ​

css
/* 大写 */
.uppercase {
  text-transform: uppercase;
}

/* 小写 */
.lowercase {
  text-transform: lowercase;
}

/* 首字母大写 */
.capitalize {
  text-transform: capitalize;
}

/* 无转换（默认） */
.none {
  text-transform: none;
}

使用场景：

css
/* 按钮文字大写 */
.button {
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* 标题首字母大写 */
.post-title {
  text-transform: capitalize;
}

/* 导航菜单 */
.nav-item {
  text-transform: uppercase;
  font-size: 0.9rem;
  font-weight: 600;
}

5. 行高 (line-height) ​

行高是文本可读性最重要的因素之一。

css
/* 使用数值（推荐，无单位倍数） */
.normal-line-height {
  line-height: 1.6; /* 字体大小的 1.6 倍 */
}

/* 使用像素 */
.fixed-line-height {
  font-size: 16px;
  line-height: 24px;
}

/* 使用百分比 */
.percentage-line-height {
  line-height: 160%;
}

/* 使用 em */
.em-line-height {
  line-height: 1.5em;
}

最佳实践：

css
/* 正文段落 - 较大的行高提高可读性 */
p {
  font-size: 16px;
  line-height: 1.6; /* 推荐 1.4-1.8 之间 */
}

/* 标题 - 较小的行高更紧凑 */
h1 {
  font-size: 2.5rem;
  line-height: 1.2; /* 标题可以更紧凑 */
}

/* 代码块 - 精确的行高 */
code {
  font-size: 14px;
  line-height: 1.5;
}

6. 字母间距 (letter-spacing) ​

css
/* 增加间距 */
.spaced-letters {
  letter-spacing: 2px;
}

/* 减少间距 */
.tight-letters {
  letter-spacing: -1px;
}

/* 正常间距 */
.normal-spacing {
  letter-spacing: normal;
}

/* 使用 em 单位 */
.em-spacing {
  letter-spacing: 0.1em;
}

应用场景：

css
/* 按钮和标签 */
.button,
.tag {
  text-transform: uppercase;
  letter-spacing: 1px; /* 大写字母增加间距更易读 */
}

/* Logo 文字 */
.logo-text {
  letter-spacing: 3px;
  font-weight: 700;
}

/* 导航菜单 */
.nav-link {
  letter-spacing: 0.5px;
}

7. 词间距 (word-spacing) ​

css
/* 增加词间距 */
.wide-words {
  word-spacing: 5px;
}

/* 减少词间距 */
.tight-words {
  word-spacing: -2px;
}

/* 正常间距 */
.normal-word-spacing {
  word-spacing: normal;
}

8. 文本缩进 (text-indent) ​

css
/* 首行缩进 */
.indented-paragraph {
  text-indent: 2em; /* 缩进两个字符 */
}

/* 负缩进（悬挂缩进） */
.hanging-indent {
  text-indent: -1em;
  padding-left: 1em;
}

中文段落常用样式：

css
.chinese-paragraph {
  text-indent: 2em; /* 首行缩进 */
  line-height: 1.8; /* 较大行高 */
  text-align: justify; /* 两端对齐 */
  margin-bottom: 1em;
}

9. 文本阴影 (text-shadow) ​

css
/* 基础阴影：x偏移 y偏移 模糊半径 颜色 */
.simple-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* 多重阴影 */
.multiple-shadows {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3), 0 0 10px rgba(255, 255, 255, 0.5);
}

/* 发光效果 */
.glow-text {
  color: white;
  text-shadow: 0 0 10px rgba(52, 152, 219, 0.8), 0 0 20px rgba(52, 152, 219, 0.6),
    0 0 30px rgba(52, 152, 219, 0.4);
}

/* 立体效果 */
.3d-text {
  color: #2c3e50;
  text-shadow: 1px 1px 0 #34495e, 2px 2px 0 #34495e, 3px 3px 0 #34495e, 4px 4px
      0 #34495e;
}

10. 文本溢出处理 ​

css
/* 单行文本溢出显示省略号 */
.ellipsis-single {
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 隐藏溢出 */
  text-overflow: ellipsis; /* 显示省略号 */
}

/* 多行文本溢出 */
.ellipsis-multi {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 显示3行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 强制换行 */
.word-break {
  word-break: break-all; /* 在任意字符间断行 */
}

.word-wrap {
  word-wrap: break-word; /* 在单词边界换行 */
}

实际应用案例 ​

1. 博客文章排版 ​

css
.blog-post {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Microsoft YaHei", sans-serif;
}

.blog-post h1 {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.2;
  color: #2c3e50;
  margin-bottom: 10px;
}

.blog-post .meta {
  font-size: 0.9rem;
  color: #7f8c8d;
  margin-bottom: 30px;
}

.blog-post p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #34495e;
  margin-bottom: 1.5em;
  text-align: justify;
}

.blog-post h2 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #2c3e50;
  margin-top: 2em;
  margin-bottom: 0.8em;
}

2. 卡片标题样式 ​

css
.card-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 10px;

  /* 限制两行，超出显示省略号 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

3. 价格标签 ​

css
.price-tag {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.price-current {
  font-size: 2rem;
  font-weight: 700;
  color: #e74c3c;
}

.price-original {
  font-size: 1.2rem;
  color: #95a5a6;
  text-decoration: line-through;
}

.price-currency {
  font-size: 1.2rem;
  font-weight: 400;
}

文本样式最佳实践 ​

1. 保证可读性 ​

css
/* 推荐：良好的文本可读性 */
.readable-text {
  font-size: 16px; /* 不要太小 */
  line-height: 1.6; /* 适当的行高 */
  color: #2c3e50; /* 足够的对比度 */
  max-width: 70ch; /* 限制行长度（约70个字符） */
}

2. 响应式字体 ​

css
/* 使用 rem 单位实现响应式 */
html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  font-size: 1rem;
}

h1 {
  font-size: 2.5rem;
}

3. 字体加载优化 ​

css
/* 使用 font-display 控制字体加载 */
@font-face {
  font-family: "CustomFont";
  src: url("/fonts/custom-font.woff2") format("woff2");
  font-display: swap; /* 立即显示备用字体，字体加载完成后切换 */
}

总结 ​

文本样式是网页设计的基础，直接影响用户的阅读体验。

核心要点：

  • 字体属性：合理选择字体族、大小、粗细和样式
  • 文本属性：掌握对齐、装饰、转换等文本控制技巧
  • 间距控制：行高、字母间距、词间距影响可读性
  • 可读性优先：确保文字大小适中、对比度足够、行长合理
  • 响应式设计：根据设备调整字体大小