跟着 MDN 学CSS day_29：（掌握文本与字体样式的核心艺术）

文字是网页内容的核心载体 ，它承载着信息传达的重任。对于前端开发者而言，仅仅将文字摆放在页面上是远远不够的，如何精准地控制字体的外观、粗细、大小，以及文本的对齐方式、行间距和字间距，是打造优秀阅读体验的关键。

CSS 为此提供了两大属性类别：

一类是直接作用于字符本身 的字体样式属性
另一类是影响文本块整体布局 的文本布局属性

本文将带你系统地学习这些核心属性，从基础的字体颜色、种类、大小，到高级的文字阴影、字母间距，再到便捷的 font 简写，为你构建完整的文本样式知识体系。

一、字体颜色：为文本赋予视觉基调

color 属性是设置文本样式最基础也最常用的属性，它用于定义选中元素的前景内容的颜色。

📝 前景内容范围 ：主要指文本，同时也包括使用 text-decoration 属性添加的下划线、上划线或删除线等装饰线条的颜色。

color 属性可以接受任何合法的 CSS 颜色值：

颜色格式	示例	特点
命名颜色	`red`、`blue`、`navy`	快速但选择有限
十六进制	`#ff0000`、`#333333`	精确、常用
RGB/RGBA	`rgb(255, 0, 0)`、`rgba(0, 123, 255, 0.8)`	支持透明度控制
HSL/HSLA	`hsl(0, 100%, 50%)`	直观调整色相、饱和度、亮度

💡 默认行为 ：如果没有为元素单独设置 color 属性，浏览器通常会为其应用一个默认颜色 。对于大多数浏览器而言，正文文本的默认颜色是黑色。

示例代码

css 复制代码

/* 使用命名颜色 */
.heading-primary {
  color: navy;
}

/* 使用十六进制颜色 */
.body-text {
  color: #333333;
}

/* 使用 RGBA 颜色，包含透明度 */
.link {
  color: rgba(0, 123, 255, 0.8);
}

🔍 讲解：

.heading-primary ------ 直接使用了浏览器内置的命名颜色 navy，这是一种快速但选择有限的设色方式

.body-text ------ 使用了十六进制颜色 #333333，这是一种深灰色 ，是现代网页设计中非常常用的正文颜色，比纯黑色 #000 看起来更柔和 ，能减少视觉疲劳

.link ------ 使用了带有透明度的 rgba 函数，定义了一个蓝色，并将其不透明度设置为 80%

🎯 RGBA优势 ：使用 rgba 的优势在于，颜色可以叠加在父元素的背景之上 ，创造出丰富的层次感，这在设置悬停效果或背景上的文本时特别有用。

二、字体种类：构建可靠的字体栈

font-family 属性允许你为文本指定一个字体或一个按优先级排列的字体列表。

📐 渲染机制 ：当浏览器渲染页面时，会从左到右依次检查 列表中指定的字体是否在用户的操作系统中可用。如果第一个字体可用，就使用它；如果不可用，就尝试下一个 ，以此类推。如果列表中的所有字体都不可用，浏览器将使用其默认字体。

这个字体列表被称为字体栈 。由于我们无法预知用户设备上安装了哪些字体，构建一个健壮的字体栈至关重要。

2.1 五大通用字体族

最佳实践是在字体栈的最后，以一个通用的字体族名称收尾。CSS 定义了五个通用字体族：

通用字体族	特征	适用场景
`serif`	衬线字体（笔画末端有装饰性小线）	传统、正式、长文阅读
`sans-serif`	无衬线字体（笔画末端无装饰）	现代、简洁、屏幕显示
`monospace`	等宽字体（每个字符宽度相同）	代码、表格数据
`cursive`	手写字体	装饰性、个性化
`fantasy`	装饰字体	特殊效果、标题

🎯 推荐收尾 ：serif、sans-serif 和 monospace 在大多数系统中都能给出比较合理的默认字体。
📝 引号规则 ：当一个字体名称包含空格 （如 "Times New Roman" 或 "Trebuchet MS"）时，必须用引号将其括起来。

2.2 代码示例

css 复制代码

/* 为正文设置一个优先使用系统原生无衬线字体的字体栈 */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* 为标题设置一个优先使用衬线字体的字体栈 */
h1, h2, h3 {
  font-family: "Times New Roman", Times, Georgia, serif;
}

/* 为代码块设置一个等宽字体栈 */
code, pre {
  font-family: "Courier New", Courier, "Lucida Console", Monaco, monospace;
}

🔍 讲解：

字体栈优先级顺序设计意图

正文 -apple-system → BlinkMacSystemFont → "Segoe UI" → Roboto → "Helvetica Neue" → Arial → sans-serif 优先使用 macOS/iOS 系统字体，然后是 Windows 现代系统字体，接着是 Android 系统字体，最后是广泛可用的网络安全字体

标题 "Times New Roman" → Times → Georgia → serif 偏好使用衬线字体 ，营造传统、正式的阅读体验

代码 "Courier New" → Courier → "Lucida Console" → Monaco → monospace 锁定等宽字体 ，确保代码的对齐整齐

🎯 核心价值 ：这样做的好处是，在不同操作系统 上，页面都能利用该平台最优化、加载最快的原生字体 ，提供一致的阅读体验。

字体栈	优先级顺序	设计意图
正文	`-apple-system` → `BlinkMacSystemFont` → `"Segoe UI"` → `Roboto` → `"Helvetica Neue"` → `Arial` → `sans-serif`	优先使用 macOS/iOS 系统字体，然后是 Windows 现代系统字体，接着是 Android 系统字体，最后是广泛可用的网络安全字体
标题	`"Times New Roman"` → `Times` → `Georgia` → `serif`	偏好使用衬线字体，营造传统、正式的阅读体验
代码	`"Courier New"` → `Courier` → `"Lucida Console"` → `Monaco` → `monospace`	锁定等宽字体，确保代码的对齐整齐

三、字体大小：掌握绝对与相对单位

font-size 属性用于控制文本的大小。它可以接受多种类型的值，其中最常用的单位包括 px（像素）、em、rem 和百分比。

单位	类型	参考基准	特点
`px`	绝对单位	固定像素值	排版直观，但缺乏灵活性
`em`	相对单位	父元素的字体大小	可缩放，但嵌套时可能层层叠加
`rem`	相对单位	根元素（`<html>`）的字体大小	全局可控，计算简单
`%`	相对单位	父元素的字体大小	与 `em` 类似

💡 最佳实践 ：rem 是现代CSS开发的首选 。一个常见的实践是将根元素的 font-size 设置为 10px 或 62.5%（因为 16px * 62.5% = 10px），这样 1.4rem 就直观地等于 14px。

示例代码

css 复制代码

/* 1. 将根字体大小设为 10px，方便计算 */
html {
  font-size: 10px; /* 16px 的 62.5% 也是 10px */
}

/* 2. 其他所有元素使用 rem 单位定义大小 */
h1 {
  font-size: 3.2rem; /* 32px */
}

h2 {
  font-size: 2.4rem; /* 24px */
}

p {
  font-size: 1.6rem; /* 16px */
  line-height: 1.5;
}

.small-text {
  font-size: 1.2rem; /* 12px */
}

🔍 讲解：

这段代码建立了一个清晰的、基于 rem 的字体大小体系。

元素 rem 值对应像素用途

html --- 10px 基准，方便心算

h1 3.2rem 32px 一级标题

h2 2.4rem 24px 二级标题

p 1.6rem 16px 正文

.small-text 1.2rem 12px 辅助文字

🎯 核心优势 ：这个体系最大的优势在于全局可维护性 。如果有一天，产品经理要求提升整个网站的字体大小以增强可读性，你只需要修改 html 中这一处的 font-size，比如改为 12px，那么整个页面的所有文本都会按比例放大 ，无需逐一修改无数个样式规则。

元素	rem 值	对应像素	用途
`html`	---	`10px`	基准，方便心算
`h1`	`3.2rem`	`32px`	一级标题
`h2`	`2.4rem`	`24px`	二级标题
`p`	`1.6rem`	`16px`	正文
`.small-text`	`1.2rem`	`12px`	辅助文字

四、字体样式与粗细：塑造文本的形态

4.1 `font-style` ------ 斜体控制

font-style 属性主要用于开启或关闭文本的斜体效果。

值	效果	适用场景
`normal`	正常（非斜体）	默认值；用于在原本为斜体的元素上强制取消斜体
`italic`	真斜体	字体本身有斜体版本时使用
`oblique`	模拟斜体	字体本身没有斜体版本时，浏览器通过倾斜正常字体来模拟

💡 使用频率 ：你很少需要用到 normal，除非你需要在一个原本为斜体的元素（如 <em> 或 <i> 标签的内容）上强制取消斜体，使其恢复为普通字体。

4.2 `font-weight` ------ 字重控制

font-weight 属性用于设置文本的粗细。

值类型	示例	说明
关键字	`normal`、`bold`	`normal` = 400，`bold` = 700
数值	`100` ~ `900`	100 （极细）到 900 （极粗），步长为 100

⚠️ 重要前提 ：能否显示所有这些粗细级别，取决于你所使用的字体家族是否包含了这些字重版本 。如果指定的字重不可用 ，浏览器会尝试近似匹配。

示例代码

css 复制代码

/* 将段落默认字体设置为正常（非斜体），字重为 400 */
p {
  font-style: normal;
  font-weight: 400;
}

/* 对引用块中的文字应用真斜体 */
blockquote p {
  font-style: italic;
}

/* 对强调文本使用更粗的字重 */
strong {
  font-weight: 700; /* 等同于 bold */
}

/* 对特定标题使用更重的字重，前提是字体支持 */
.hero-title {
  font-weight: 900; /* 极粗，相当于 black */
}

🔍 讲解：

p 元素显式设置了 font-style: normal，这本身是默认值，但可以作为全局重置使用

blockquote p 则让引用中的段落呈现斜体，这是一种常见的排版习惯，用以区分引用内容和正文

对于 <strong> 标签，我们明确使用 font-weight: 700 来加粗，以保证其在视觉上的强调效果

.hero-title 类尝试使用 900 的字重来制造强烈的视觉冲击 ，这通常在超大标题上效果显著

⚠️ 关键前提 ：hero-title 所使用的 font-family 字体必须包含 900 字重的变体 ，否则浏览器可能只会将其显示为普通的 700 粗体。

五、文本转换与装饰：细节之处的微调

5.1 `text-transform` ------ 大小写转换

text-transform 属性用于控制文本的大小写转换 ，它不改变原始文本内容 ，仅在视觉上呈现不同的效果。

值	效果	适用场景
`uppercase`	全大写	导航项、按钮、标签
`lowercase`	全小写	特殊设计风格
`capitalize`	首字母大写	文章标题、列表项
`none`	不转换	默认值；取消继承的转换

5.2 `text-decoration` ------ 文本装饰

text-decoration 是一个简写属性 ，用于在文本上添加或移除装饰线。

🎯 最常用场景 ：text-decoration: none; ------ 移除链接 <a> 元素默认的下划线。

text-decoration 还可以结合以下长写属性 ，创造出更复杂的装饰效果：

长写属性	控制内容	示例
`text-decoration-line`	装饰线类型	`underline`、`overline`、`line-through`
`text-decoration-style`	装饰线样式	`solid`、`dashed`、`dotted`、`wavy`
`text-decoration-color`	装饰线颜色	`red`、`#ff0000`

示例代码

css 复制代码

/* 1. 导航链接全部转为大写 */
.main-navigation a {
  text-transform: uppercase;
  text-decoration: none; /* 移除链接默认下划线 */
}

/* 2. 文章标题的每个单词首字母大写 */
.article-title {
  text-transform: capitalize;
}

/* 3. 使用组合属性创建自定义的删除线效果 */
.error-message {
  text-decoration-line: line-through;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

🔍 讲解：

规则效果设计意图

.main-navigation a 大写 + 无下划线导航项看起来更加整洁和突出；设计师可以用边框或背景等其他方式来表示交互状态

.article-title 每个单词首字母大写智能地将每个单词的首字母转换为大写，适合文章标题

.error-message 波浪形红色删除线 醒目的装饰效果，非常适合用于显示错误或已失效的文本信息

规则	效果	设计意图
`.main-navigation a`	大写 + 无下划线	导航项看起来更加整洁和突出；设计师可以用边框或背景等其他方式来表示交互状态
`.article-title`	每个单词首字母大写	智能地将每个单词的首字母转换为大写，适合文章标题
`.error-message`	波浪形红色删除线	醒目的装饰效果，非常适合用于显示错误或已失效的文本信息

六、文字阴影：为文本增添立体感

text-shadow 属性可以为文本添加一个或多个阴影效果 ，是创造文字立体感、光晕效果 或增加可读性的有力工具。

📐 语法：text-shadow: h-offset v-offset blur-radius color;

参数	说明	必需
水平偏移量	阴影相对于原始文本的水平位置，正值向右，负值向左	✅
垂直偏移量	阴影相对于原始文本的垂直位置，正值向下，负值向上	✅
模糊半径	阴影边缘的柔和程度，数值越大越模糊	❌（默认0）
颜色	阴影的颜色	❌（默认黑色）

🚀 多重阴影 ：text-shadow 的强大之处在于，你可以通过逗号分隔 来同时应用多个阴影 。通过组合不同的偏移量、模糊度和颜色，可以创造出霓虹灯、火焰、3D凸起等复杂的视觉效果。

示例代码

css 复制代码

/* 1. 简单的右下角阴影，增加立体感 */
.card-title {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* 2. 多重阴影创造霓虹灯般的发光效果 */
.neon-text {
  color: white;
  text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px #0fa,
    0 0 82px #0fa,
    0 0 92px #0fa;
}

🔍 讲解：

.card-title ------ 创建了一个经典的、柔和的投影。阴影向右下方各偏移 2px ，模糊半径为 4px ，颜色使用了半透明的黑色 ，这使得阴影与背景自然融合 ，为标题文字增添了轻微的立体感，这在卡片组件中非常常见

.neon-text ------ 创造了一个复杂的发光效果 ，这是多重阴影的完美应用：

首先设置了多层白色阴影 ，从内到外逐渐增加模糊半径 ，形成了一个强烈的白色光芯

接着，通过添加更大模糊半径的青绿色（#0fa）阴影 ，创造出霓虹光晕向外扩散的效果

🎯 技术价值 ：这种多层阴影叠加的技术 ，是创造各种独特文字视觉风格的基石。

七、文本对齐与行高：构筑舒适的阅读流

7.1 `text-align` ------ 水平对齐

text-align 属性用于控制内联级内容 （如文本）在其包含块内的水平对齐方式。

值	效果	适用场景
`left`	左对齐	从左到右语言的正文（默认值）
`right`	右对齐	数字、价格、日期
`center`	居中对齐	标题、按钮、短文本
`justify`	两端对齐	长段落、报纸排版

⚠️ justify注意 ：justify 会拉伸每一行的单词间距 ，使文本行的首尾都与容器边缘对齐，但若使用不当，尤其是在长单词较多 的段落中，可能产生不美观的单词间隙。

7.2 `line-height` ------ 行高控制

line-height 属性用于设置文本行盒的最小高度 ，通俗地讲，就是行与行之间的间距。

🎯 最佳实践 ：使用一个无单位的数字 ，例如 1.5。这个数字会作为一个乘数，作用于当前元素的 font-size。
📐 计算示例 ：如果 font-size 为 16px，那么 line-height: 1.5 就计算为 24px。
💡 继承优势 ：使用无单位值的最大优势在于它的继承性 ：子元素将继承这个乘数，而不是一个计算后的固定像素值 。这样无论子元素自身的字体大小如何变化，都能保持一个恰当的比例。

示例代码

css 复制代码

/* 为正文段落设置左对齐和舒适的行高 */
p {
  text-align: left;
  line-height: 1.6;
  font-size: 16px;
}

/* 让标题居中对齐，并调整其行高 */
.article-heading {
  text-align: center;
  line-height: 1.3;
  font-size: 32px;
}

/* 设置两端对齐，并注意配合连字符使用 */
.justified-text {
  text-align: justify;
  hyphens: auto; /* 自动添加连字符以帮助改善单词间隙 */
}

🔍 讲解：

p 元素 ------ 设置了最常规的阅读对齐方式 left 和行高 1.6 。研究表明，正文的行高在 1.5 到 2 之间 时，人眼的阅读体验最为舒适，1.6 是一个非常平衡的选择

.article-heading ------ 由于其字体较大（32px），如果使用相同的 1.6 行高 ，在多行标题时，行与行之间会显得过于疏远 ，因此使用了一个较小的 1.3 行高 来保持标题的紧凑与整体感

.justified-text ------ 设置了 text-align: justify，并额外设置了 hyphens: auto。hyphens 属性允许浏览器在单词内部适当的音节处自动插入连字符 进行断词，这能有效避免两端对齐文本中出现的巨大、不规则的单词间隙 ，是提升两端对齐排版质量的绝佳搭档

八、字母与单词间距：微调局部的疏密

letter-spacing 和 word-spacing 这两个属性允许你精细地控制 文本中字母之间 以及单词之间 的空隙。它们都属于微调属性 ，在日常的段落文本中不经常使用，但在特定的设计场景下，它们能发挥巨大的作用。

属性	作用范围	正值效果	负值效果
`letter-spacing`	字母之间的间距	增加间距，文字更开阔、透气	减少间距，文字更紧凑
`word-spacing`	单词之间的间距	增加间距	减少间距

⚠️ 使用注意 ：使用这两个属性时，通常不建议设置过大的值 ，以免破坏单词的识别性 和整体的阅读流畅度。

示例代码

css 复制代码

/* 1. 为导航项增加字母间距，使其更现代、透气 */
.main-nav-item {
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 14px;
}

/* 2. 为段落的第一行增加单词间距，创造一种戏剧性的引导效果 */
.intro-paragraph::first-line {
  letter-spacing: 1px;
  word-spacing: 3px;
  font-weight: bold;
}

🔍 讲解：

.main-nav-item ------ 展示了 letter-spacing 在现代网页导航中的经典应用 。将文本转换为大写（text-transform: uppercase）后，字母之间在视觉上会显得过于拥挤 ，此时增加 1.5px 的字母间距，能为每个字符"松绑 "，使导航项看起来更加通透、有设计感 ，尤其是在 14px 这样相对较小的字体尺寸上

.intro-paragraph::first-line ------ 使用了 ::first-line 伪元素来单独选中段落的第一行内容 。通过轻微增加 letter-spacing 和 word-spacing，配合加粗的字体，可以创造出一种类似杂志文章首行的、略微舒展和引人注目 的导语效果，让读者自然地从这里开始阅读

九、Font 简写：化繁为简的一站式声明

font 属性是一个强大的简写形式，它允许你在一行声明中同时设置多个与字体相关的属性。

📋 可设置属性 ：font-style、font-variant、font-weight、font-stretch、font-size、line-height、font-family

9.1 使用规则

规则	说明
必需项	只有 `font-size` 和 `font-family` 是绝对必需的，缺少任何一个，整个声明无效
顺序要求	`font-size` 和 `line-height` 之间必须用斜线 `/` 分隔
重置行为	`font` 简写会重置它未明确列出的所有字体相关属性为初始值，包括 `font-style`、`font-weight` 等

📝 通常实践 ：将那些不常用或被省略的属性 （如 font-stretch）放在前面，最后以关键的 font-size、可能的 line-height 和 font-family 结尾。

示例代码

css 复制代码

/* 1. 一个完整的 font 简写 */
.headline {
  font: italic small-caps bold 2.5rem/1.3 "Times New Roman", Georgia, serif;
}

/* 2. 一个最小化的 font 简写，只包含必需项 */
.body-copy {
  font: 1rem/1.6 "Helvetica Neue", Arial, sans-serif;
}

🔍 讲解：

.headline ------ 使用了一个完整的 font 简写。它同时设置了：

font-style: italic

font-variant: small-caps

font-weight: bold

font-size: 2.5rem

line-height: 1.3（斜线分隔）

font-family: "Times New Roman", Georgia, serif

这一行代码完成了通常需要六行才能完成的工作

.body-copy ------ 演示了最小化的用法 ，它省略了所有非必需项（italic、small-caps、bold 等），只设置了：

必需的 font-size: 1rem

紧随斜线后的 line-height: 1.6

最后的 font-family

所有被省略的属性都将被重置为它们的初始值 （例如 font-weight 会变为 normal）

⚠️ 使用注意 ：因此，掌握 font 简写可以显著提升编码效率 ，但务必注意其属性和值的顺序 以及对未声明属性的重置行为 ，这是避免出现意外样式的关键。

十、小结

掌握文本与字体样式，是 CSS 学习者从基础走向进阶的必经之路。

属性类别	核心属性	关键要点
字体颜色	`color`	支持命名颜色、十六进制、RGB/RGBA、HSL/HSLA
字体种类	`font-family`	构建字体栈，以通用字体族收尾
字体大小	`font-size`	`rem` 是现代首选，配合 `html { font-size: 10px }` 简化计算
字体样式	`font-style`	`normal`、`italic`、`oblique`（模拟斜体）
字体粗细	`font-weight`	`100`~`900` 数值控制，字体必须支持对应字重
文本转换	`text-transform`	`uppercase`、`lowercase`、`capitalize`、`none`
文本装饰	`text-decoration`	简写 + `text-decoration-line/style/color` 长写组合
文字阴影	`text-shadow`	支持多重阴影，创造霓虹灯、光晕等复杂效果
文本对齐	`text-align`	`left`、`right`、`center`、`justify`
行高	`line-height`	使用无单位数字（如 `1.6`），继承性最佳
字母/单词间距	`letter-spacing` / `word-spacing`	微调属性，不宜过大
Font简写	`font`	必需 `font-size` + `font-family`；注意顺序和重置行为

本文从最直观的 color 属性开始，深入讲解了 font-family 字体栈的构建策略，辨析了 px、em、rem 等字体大小单位的适用场景，并展示了 font-style、font-weight、text-transform 等属性如何塑造文本的形态。在此基础上，我们还探索了利用 text-shadow 创造视觉效果，通过 text-align 和 line-height 构建舒适的阅读流，使用 letter-spacing 进行微调，以及最终利用 font 简写实现高效编码。

🚀 此刻，你已掌握了在网页上驾驭文字的核心技能。下一篇，我们将继续深入 CSS 的精彩世界，探索列表样式的奥秘。

还在纠结 CSS 样式写得杂乱无章、布局频频踩坑？收藏此文持续跟进，后续分享 CSS 高效简写、兼容适配方案、经典布局案例、样式避坑干货，从基础样式到实战排版一站式学透，快速提升前端页面编写能力！

跟着 MDN 学CSS day_29：（掌握文本与字体样式的核心艺术）

一、字体颜色：为文本赋予视觉基调

示例代码

二、字体种类：构建可靠的字体栈

2.1 五大通用字体族

2.2 代码示例

三、字体大小：掌握绝对与相对单位

示例代码

四、字体样式与粗细：塑造文本的形态

4.1 font-style ------ 斜体控制

4.2 font-weight ------ 字重控制

示例代码

五、文本转换与装饰：细节之处的微调

5.1 text-transform ------ 大小写转换

5.2 text-decoration ------ 文本装饰

示例代码

六、文字阴影：为文本增添立体感

示例代码

七、文本对齐与行高：构筑舒适的阅读流

7.1 text-align ------ 水平对齐

7.2 line-height ------ 行高控制

示例代码

八、字母与单词间距：微调局部的疏密

示例代码

九、Font 简写：化繁为简的一站式声明

9.1 使用规则

示例代码

十、小结

4.1 `font-style` ------ 斜体控制

4.2 `font-weight` ------ 字重控制

5.1 `text-transform` ------ 大小写转换

5.2 `text-decoration` ------ 文本装饰

7.1 `text-align` ------ 水平对齐

7.2 `line-height` ------ 行高控制