05｜CSS 颜色、字体与文本样式

页面内容需要用颜色区分层级、用字体传达风格、用文本样式控制可读性。这些属性本身不复杂，但组合使用时容易混乱：为什么文字颜色没生效、中文字体为什么显示成宋体、行高该设多少——这篇把颜色表示、字体栈、文本修饰这三个基础能力打牢。

一、颜色表示

CSS 支持多种颜色写法：

十六进制

.text-primary { color: #333333; }   /* 深灰 */
.text-danger { color: #ff4d4f; }    /* 红色 */
.bg-light { background-color: #f5f5f5; }  /* 浅灰背景 */

六位十六进制 #RRGGBB，每两位分别表示红、绿、蓝的强度（00~FF）。如果三对数字各自相同，可以简写为三位： #333 等于 #333333，#f03 等于 #ff0033。

rgb / rgba

.text-primary { color: rgb(51, 51, 51); }
.overlay { background-color: rgba(0, 0, 0, 0.5); }  /* 半透明黑 */

rgb(红, 绿, 蓝)，每个值范围 0~255。rgba 多一个 alpha 通道控制透明度（0 完全透明，1 完全不透明）。

颜色关键字

.red { color: red; }
.white { color: white; }
.transparent { color: transparent; }  /* 完全透明 */

关键字写法简单，但可选颜色有限（约 140 个），且不利于精确控制。生产环境推荐用十六进制或 RGB。

颜色选择建议

场景	推荐颜色	原因
正文文字	#333 或 #222	纯黑 #000 在屏幕上刺眼，深灰更柔和
次要文字	#666 或 #999	降低视觉权重，区分主次
边框/分割线	#ddd 或 #eee	浅灰不抢眼，勾勒边界即可
错误提示	#ff4d4f 或 #d93025	红色具有警示语义
成功提示	#52c41a 或 #137333	绿色具有确认语义

二、字体

font-family 字体栈

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

浏览器按顺序尝试字体：先找 -apple-system（苹果系统字体），找不到就找 BlinkMacSystemFont，依次向下，最后回退到通用的 sans-serif（无衬线字体族）。

中文字体需要单独处理，因为英文字体通常不含中文字符：

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

字体名	平台/场景
PingFang SC	macOS/iOS 默认中文字体
Hiragino Sans GB	macOS 备用中文
Microsoft YaHei	Windows 默认中文字体
Noto Sans SC	Google 开源中文字体（Web 字体）

字体名包含空格时必须用引号包裹（"Segoe UI"），不含空格的可以不引（Arial）。

字体大小

body { font-size: 16px; }
h1 { font-size: 24px; }
h2 { font-size: 20px; }
.small { font-size: 14px; }

浏览器默认字体大小通常是 16px。用像素（px）定义大小时，用户通过浏览器缩放改变字号不会生效——这对需要无障碍访问的用户不友好。

更灵活的做法是用 rem：

html { font-size: 16px; }
body { font-size: 1rem; }       /* 16px */
h1 { font-size: 1.5rem; }      /* 24px */
.small { font-size: 0.875rem; } /* 14px */

rem 基于根元素（html）的字体大小计算。如果用户调整浏览器默认字号，或开发者全局修改 html 的 font-size，所有使用 rem 的元素会同步缩放。

字重

.light { font-weight: 300; }
.normal { font-weight: 400; }   /* 默认值 */
.bold { font-weight: 700; }

常用值：300（细）、400（常规）、500（中等）、700（粗）。不是所有字体都提供所有字重，如果指定了字体不存在的字重，浏览器会模拟渲染（效果可能不理想）。

行高

body {
  line-height: 1.6;
}

行高控制文字行的垂直间距。设为单位less数字（如 1.6）时，表示字体大小的倍数：16px 文字配 1.6 行高，实际行高为 25.6px。

场景	推荐行高
正文阅读	1.6 ~ 1.8
标题	1.2 ~ 1.4
紧凑表格	1.4 ~ 1.5

行高过小会导致文字行重叠，难以阅读；行高过大则会破坏段落 cohesion，显得松散。

三、文本样式

对齐

.text-left { text-align: left; }       /* 左对齐，默认 */
.text-center { text-align: center; }   /* 居中 */
.text-right { text-align: right; }     /* 右对齐 */
.text-justify { text-align: justify; } /* 两端对齐 */

text-align 对块级元素内的文字生效，不是对块级元素本身生效。要让一个块级元素在其父容器中水平居中，用 margin: 0 auto 配合固定宽度，或者用 flex 布局。

装饰线

.underline { text-decoration: underline; }
.line-through { text-decoration: line-through; }
.no-underline { text-decoration: none; }   /* 常用于去掉链接默认下划线 */

空白处理

/* 默认值：连续空白合并，换行符当作空白 */
.normal { white-space: normal; }

/* 保留所有空白和换行（适合展示代码） */
.pre { white-space: pre; }

/* 不自动换行，超出容器时溢出 */
.nowrap { white-space: nowrap; }

/* 保留空白，但自动换行 */
.pre-wrap { white-space: pre-wrap; }

文本溢出

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

/* 多行溢出（需配合 display 属性，兼容性有限） */
.multi-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

单行省略号需要三个属性同时设置：white-space: nowrap 阻止换行，overflow: hidden 隐藏溢出，text-overflow: ellipsis 显示省略号。

文字阴影

.title {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

参数顺序：水平偏移、垂直偏移、模糊半径、颜色。适合标题或需要层次感的文字，正文不建议使用。

四、Web 字体

系统字体无法满足需求时，可以加载网络字体文件：

@font-face {
  font-family: "CustomFont";
  src: url("/fonts/custom.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

body {
  font-family: "CustomFont", sans-serif;
}

font-display: swap 表示字体加载完成前，先用系统字体渲染文字（避免"字体闪烁空白"问题）。加载完成后替换为自定义字体。

中文字体文件通常很大（数 MB），直接嵌入会影响页面加载速度。如果必须使用特殊中文字体，推荐：

• 仅对标题等少量文字使用
• 使用字体子集化工具裁剪只需要的字符
• 考虑使用系统字体作为第一优先

五、常见错误

中文字体回退不当

/* 错误：没有中文字体回退，中文会显示为浏览器默认宋体 */
body { font-family: "Helvetica Neue", Arial, sans-serif; }

/* 正确：在 sans-serif 之前加入中文字体 */
body { font-family: "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif; }

行高单位混淆

/* 错误：px 行高不会随字号缩放 */
body { font-size: 16px; line-height: 24px; }
h1 { font-size: 32px; line-height: 24px; }  /* 行高反而比字号小，文字重叠 */

/* 正确：用无单位数字，自动随字号缩放 */
body { font-size: 16px; line-height: 1.5; }
h1 { font-size: 32px; line-height: 1.5; }   /* 实际行高 48px */

颜色对比度不足

/* 错误：浅灰文字配白底，对比度低，难以阅读 */
.text-muted { color: #ccc; background: #fff; }

/* 正确：确保文字与背景有足够对比度 */
.text-muted { color: #666; background: #fff; }

WCAG 建议正文文字与背景的对比度至少为 4.5:1。可以用在线对比度检查工具验证。