Klein's-blue的博客

记录生活，分享技术

0%

文本与字体

CSS 文本与字体（2025-2026 主流实用版）

1. 字体族（font-family）—— 现代写法推荐

1.1 经典字体栈（2025-2026 仍最常用）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* 系统字体栈 - 性能最佳，推荐首选 */
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

/* 中文项目常用（兼顾英文） */
font-family: 
  system-ui,
  -apple-system,
  BlinkMacSystemFont,
  "Segoe UI",
  Roboto,
  "Helvetica Neue",
  Arial,
  "Hiragino Sans GB",
  "Noto Sans SC",
  "Microsoft YaHei",
  微软雅黑,
  sans-serif;

/* 衬线体（文章正文、阅读场景） */
font-family: Georgia, Cambria, "Times New Roman", Times, serif;

/* 等宽字体（代码、终端） */
font-family: "SF Mono", "JetBrains Mono", "Consolas", "Courier New", Courier, monospace;

小技巧：

  • 优先使用 system-ui（最现代、最快）
  • 中文项目建议同时写英文 + 中文系统字体 + 通用 fallback
  • 不要写太长（浏览器匹配速度会变慢）

2. 字重（font-weight）

值 数值 常见名称 推荐场景 2025-2026 使用频率
normal 400 — 正文默认 ★★★★★
medium 500 — 稍粗一点的正文 ★★★☆☆
bold 700 bold 标题、重要强调 ★★★★★
bolder — 比父元素更粗 少用 ★☆☆☆☆
100~900 100-900 — 变量字体（Variable Fonts）神器 ★★★★☆（上升中）
300 300 Light 极细标题、现代感设计 ★★★★☆

现代变量字体写法：

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 声明变量字体 */
@font-face {
  font-family: "Inter var";
  src: url("Inter-roman.var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 75% 125%;
}

/* 使用 */
body {
  font-family: "Inter var", system-ui, sans-serif;
  font-weight: 400;          /* 任意值都可 */
}

3. 字体平滑与优化（Text Rendering）

1
2
3
4
5
6
7
8
9
/* 目前最常用组合（2025-2026 推荐） */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;  /* 部分浏览器仍有效 */
}

/* 极致锐利（小字号常见） */
font-smooth: always;         /* 非标准，慎用 */

注意：
-webkit-font-smoothing 在新版 Chromium 上效果已弱化，更多依赖字体文件本身质量

4. 行高（line-height）、字间距、文本装饰

4.1 行高最佳实践（强烈建议使用无单位数值）

1
2
3
4
5
6
7
8
9
10
11
/* 推荐写法（倍数） */
body {
  line-height: 1.5;          /* 最常用，安全 */
  /* 或 */
  line-height: 1.6~1.8;      /* 舒适阅读 */
}

/* 标题常用 */
h1, h2, h3 {
  line-height: 1.2~1.3;
}

不要使用 line-height: 150% 或 24px（会造成子元素继承问题）

4.2 字间距（letter-spacing）与词间距（word-spacing）

1
2
3
4
5
6
7
8
9
10
11
12
/* 常用场景 */
h1, h2 {
  letter-spacing: -0.02em;     /* 标题收紧，很高级 */
}

.price {
  letter-spacing: 0.05em;      /* 价格数字拉开，清晰 */
}

small {
  letter-spacing: 0.03em;      /* 小字提高可读性 */
}

5. 多行文本截断（最常考）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* 单行截断（最常用） */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 多行截断（2025-2026 主流写法） */
.line-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;         /* 显示3行 */
  overflow: hidden;
}

/* 更现代（支持情况已很好） */
@supports (-webkit-line-clamp: 3) {
  .line-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
}

6. 空白处理（white-space）速查表

值 连续空格 换行 自动换行 典型使用场景
normal 合并 保留 是 默认正文
nowrap 合并 禁止 否 强制单行（如导航、标签）
pre 保留 保留 否 显示代码、诗词、日志
pre-wrap 保留 保留 是 代码 + 自动换行
pre-line 合并 保留 是 保留手动换行但合并空格
break-spaces 保留 保留 是 保留所有空格（最接近 pre-wrap）
2025-2026 推荐： 
1
2
3
4
5
/* 代码块常用 */
pre, code {
  white-space: pre-wrap;
  word-break: break-all;      /* 或 break-word */
}

7. 文本阴影与装饰快速参考

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 常见文本阴影（现代感） */
.text-shadow-sm {
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.hero-title {
  text-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

/* 文本装饰 */
.underline {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;     /* 控制下划线距离 */
}

.strikethrough {
  text-decoration: line-through;
}

总结：2025-2026 文本处理快速决策表

需求场景 推荐属性组合 备注
最佳阅读体验 line-height: 1.5~1.7, font-weight: 400 —
现代标题 font-weight: 600~800, letter-spacing: -0.02em —
单行溢出省略 text-overflow: ellipsis + nowrap —
多行溢出省略 -webkit-line-clamp 兼容性已很好
代码/预格式化文本 white-space: pre-wrap, font-family: monospace —
价格/数字突出 letter-spacing: 0.05em, font-weight: 600 —
变量字体使用 font-variation-settings / font-weight 100~900 性能更好、体积更小