css颜色与字体搭配技巧_如何增强页面的视觉效果

WCAG 2.1要求正文对比度≥4.5:1（小字）或3:1（大字），实操需用插件检测、深色模式适配、图片背景加遮罩；字体优先system-ui、中文字体栈≤3个；行高推荐1.5–1.6倍字号；颜色统一用CSS自定义属性管理。

颜色对比度不够时，文字根本看不清

WCAG 2.1 标准要求正文文本与背景的对比度至少为 4.5:1（小字号）或 3:1（大字号）。很多设计师直接用 #999 灰字配 #f5f5f5 浅灰背景，实际对比度只有 2.3:1，手机阳光下几乎不可读。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 用浏览器插件（如 axe DevTools 或 Color Contrast Analyzer）实时检测当前 color 和 background-color 的对比值
• 深色模式下别硬套浅色方案：比如 background: #121212 时，color: #fff 没问题，但 color: #e0e0e0 就会发灰、吃力
• 避免在图片背景上叠放纯黑/纯白文字——加一层半透 background: rgba(0,0,0,0.6) 或使用 text-shadow: 0 1px 2px rgba(0,0,0,0.5) 强化可读性

font-family 堆砌太多反而降低加载速度和一致性

写成 font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; 看似稳妥，但每个字体名都会触发一次本地字体查询，iOS 和 Android 对中文字体名大小写、空格、引号敏感，容易 fallback 到系统默认字体。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 优先用 system-ui：现代浏览器支持良好，自动匹配平台默认 UI 字体（macOS 用 San Francisco，Windows 用 Segoe UI），渲染快且原生感强
• 中文字体栈控制在 3 个以内，按「首选→次选→兜底」排列，例如：font-family: -apple-system, system-ui, "SF Pro SC", sans-serif;
• 避免用 @import 加载 Google Fonts；改用 + font-display: swap 防止 FOIT（无字体阻塞）

line-height 和 font-size 不匹配导致行间拥挤或松散

常见错误是设了 font-size: 14px 却没调 line-height，浏览器默认用 line-height: normal（约 1.1–1.2），中文会挤在一起；而设成 line-height: 2 又太松，段落像报纸分栏。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 中文排版推荐 line-height: 1.5–1.6（即字号的 1.5–1.6 倍），比如 font-size: 16px → line-height: 24px–26px
• 用无单位数值（如 line-height: 1.5）而非像素值，确保子元素继承时能按自身字号缩放
• 标题可适当收紧：比如 h2 { font-size: 28px; line-height: 1.2; }，避免大字号+高行高造成的“空洞感”

color 值混用命名法导致维护困难

项目里同时出现 #333、rgb(51, 51, 51)、var(--text-primary)、hsl(0, 0%, 20%)，后期想统一改深灰，得全局搜四遍，还可能漏掉某处内联样式。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 全项目只用 CSS 自定义属性管理颜色，例如：:root { --color-text: #212121; --color-bg: #ffffff; }
• 避免在组件级 CSS 中写死颜色值；组件通过 color: var(--color-text); 调用，主题切换只需改 :root
• 深色模式用 @media (prefers-color-scheme: dark) 覆盖变量值，不要另写一整套 class 名

:root {
  --color-text: #212121;
  --color-bg: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #e0e0e0;
    --color-bg: #121212;
  }
}

body {
  color: var(--color-text);
  background-color: var(--color-bg);
}