CSS 字体样式：颜色、字体族、倾斜、加粗与装饰

1. 引言

CSS 中和「字体」相关的属性不少，但日常开发里真正高频用到的其实就五类：字体颜色、字体族、倾斜、加粗、文字装饰。把这五个属性吃透，绝大多数页面的文字排版需求都能覆盖。

本文只讲这五块，每个属性都给出可直接运行的代码和常见坑，不展开字号、行高、字体加载等话题。

2. 字体颜色：color

2.1 基本用法

color 控制文字颜色，是所有文字样式里最基础的一个：

css 复制代码

.text-red   { color: red; }
.text-hex   { color: #1f2328; }
.text-rgb   { color: rgb(31, 35, 40); }
.text-rgba  { color: rgba(31, 35, 40, 0.8); }
.text-hsl   { color: hsl(210, 10%, 15%); }

2.2 几种颜色写法的选择

写法	示例	适用场景
关键字	`red`、`tomato`	快速调试，不建议上线
十六进制	`#1f2328`	设计稿取色，最常用
`rgb()`	`rgb(31, 35, 40)`	需要动态计算通道值时
`rgba()`	`rgba(31, 35, 40, 0.8)`	需要透明度
`hsl()`	`hsl(210, 10%, 15%)`	需要按色相/明度批量调色

现代浏览器还支持 #1f232880 这种带 alpha 的十六进制写法，以及 rgb(31 35 40 / 0.8) 的空格分隔语法，效果和 rgba() 等价。

2.3 用 CSS 变量统一管理颜色

项目里颜色散落各处是维护噩梦，建议用变量收口：

css 复制代码

:root {
  --color-text: #1f2328;
  --color-text-secondary: #59636e;
  --color-link: #0969da;
  --color-danger: #d1242f;
}

body        { color: var(--color-text); }
.muted      { color: var(--color-text-secondary); }
a           { color: var(--color-link); }
.error      { color: var(--color-danger); }

2.4 注意点

color 是继承属性 ，设在 body 上会传递给所有后代，子元素只需覆盖差异部分。
不要只靠颜色传达信息（比如只用红色表示错误），要配合图标或文字，满足无障碍要求。
正文颜色和背景的对比度建议不低于 4.5:1。

3. 字体族：font-family

3.1 字体栈的写法

font-family 接受一个「字体栈」，浏览器从左到右依次尝试，用第一个可用的字体：

css 复制代码

body {
  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

几个关键点：

字体名包含空格时必须加引号 ，如 "PingFang SC"。
最后一定要放一个通用字体族 （serif、sans-serif、monospace、cursive、fantasy、system-ui）兜底。
中文字体建议同时写英文名和中文名，兼容老系统，例如 "Microsoft YaHei", "微软雅黑"。

3.2 中英文混排的字体栈

中文和英文的字体设计差异很大，常见做法是「英文用西文字体，中文用中文字体」，浏览器会按字符逐个回退：

css 复制代码

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

这样在 macOS 上英文走 San Francisco、中文走苹方，在 Windows 上英文走 Segoe UI、中文走微软雅黑，观感都比较自然。

3.3 system-ui：系统字体栈的捷径

现代浏览器支持 system-ui 关键字，直接使用操作系统的默认 UI 字体：

css 复制代码

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

它比手写一长串字体栈更简洁，但不同系统渲染结果不同，如果设计要求严格一致，还是需要显式指定字体。

4. 倾斜：font-style

4.1 italic 与 oblique

css 复制代码

em, .italic { font-style: italic; }
.oblique    { font-style: oblique 10deg; } /* 部分浏览器支持倾斜角度 */

italic：使用字体自带的斜体字形，字形本身经过重新设计，观感更自然。
oblique：让正体倾斜，本质是几何变换，字形结构不变。
如果字体没有斜体字形，浏览器会用 oblique 模拟，效果通常不如真斜体。

4.2 常见用法

css 复制代码

/* 引用、术语、强调 */
blockquote { font-style: italic; }
.term      { font-style: italic; }

/* 取消斜体：比如 em 在标题里不想倾斜 */
h1 em, h2 em { font-style: normal; }

4.3 注意点

中文一般不使用斜体，中文斜体是机械倾斜，可读性差。中文强调建议用加粗或颜色。
font-style 是继承属性，父元素设了 italic，子元素需要显式 normal 才能取消。

5. 加粗：font-weight

5.1 数值字重与关键字

font-weight 支持 100 到 900 的百位数值，以及关键字：

关键字	数值
`normal`	`400`
`bold`	`700`
`lighter`	相对父元素更细
`bolder`	相对父元素更粗

css 复制代码

.title    { font-weight: 700; }
.subtitle { font-weight: 500; }
.body     { font-weight: 400; }

5.2 伪加粗问题

只有字体文件本身提供了对应字重，浏览器才能真实渲染 。如果只引入了 Regular，写 font-weight: 700 时浏览器会做「伪加粗」（synthetic bold），效果通常发虚、字宽变形。

解决办法：

引入完整的字重文件（Regular + Medium + Bold）。
或改用可变字体，一个文件覆盖 100 900 全区间。

5.3 注意点

font-weight 是继承属性，b、strong 默认就是 bold。
不要用 font-weight 做「视觉层级」的唯一手段，配合字号、颜色一起用更清晰。

6. 文字装饰：text-decoration

6.1 基本用法

text-decoration 是简写属性，包含线型、颜色、样式、粗细：

css 复制代码

.underline  { text-decoration: underline; }
.line-through { text-decoration: line-through; }
.overline   { text-decoration: overline; }
.none       { text-decoration: none; }

6.2 子属性精细控制

css 复制代码

a {
  text-decoration: underline;
  text-decoration-color: #0969da;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-style: solid; /* solid / double / dotted / dashed / wavy */
}

text-decoration-color：单独控制线的颜色，可以让下划线比文字浅。
text-decoration-thickness：线的粗细。
text-underline-offset：下划线与文字的间距，避免贴得太紧。
text-decoration-style：wavy 常用于拼写错误提示。

6.3 常见场景

css 复制代码

/* 链接默认下划线，hover 时去掉 */
a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* 删除线表示原价 */
.price-old {
  text-decoration: line-through;
  color: #8b949e;
}

/* 波浪线表示拼写错误 */
.spell-error {
  text-decoration: underline wavy #d1242f;
  text-underline-offset: 3px;
}

6.4 注意点

text-decoration 不是继承属性 ，但它的效果会「穿透」到后代元素，且后代无法单独取消（除非用 display: inline-block 打断）。
装饰线颜色默认跟随 color，想区分开就显式设置 text-decoration-color。

7. 五个属性组合示例

把颜色、字体族、倾斜、加粗、装饰串起来，一个常见的文章排版片段：

css 复制代码

:root {
  --font-sans: system-ui, -apple-system, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --color-text: #1f2328;
  --color-link: #0969da;
  --color-muted: #59636e;
}

body {
  font-family: var(--font-sans);
  color: var(--color-text);
}

h1, h2, h3 {
  font-weight: 700;
  color: var(--color-text);
}

h1 em {
  font-style: normal; /* 中文标题不用斜体 */
  color: var(--color-link);
}

strong {
  font-weight: 700;
}

blockquote {
  font-style: italic;
  color: var(--color-muted);
}

a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-thickness: 2px;
}

del {
  color: var(--color-muted);
  text-decoration: line-through;
}

8. 小结

属性	作用	是否继承	关键提醒
`color`	文字颜色	是	用变量收口，注意对比度
`font-family`	字体族	是	必须带通用字体族兜底
`font-style`	倾斜	是	中文慎用斜体
`font-weight`	加粗	是	字体文件要有对应字重，否则伪加粗
`text-decoration`	装饰线	否（但效果穿透）	用子属性精细控制

这五个属性覆盖了文字样式的大部分日常需求。先把它们用熟，再考虑字号、行高、字体加载这些进阶话题，页面文字排版就已经相当扎实了。