freeCodeCamp Applied Visual Design 课程实战：用 font-size 为多个标题元素建立字号体系
【免费下载链接】freeCodeCampfreeCodeCamp.org's open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp
本文基于 freeCodeCamp 开源课程中 Applied Visual Design（视觉设计应用）模块的练习题目《Set the font-size for Multiple Heading Elements》展开，完整还原该练习的字号层级要求、可运行的 HTML/CSS 代码与配套测试断言，并结合课程仓库中的挑战文件、模块结构与测试运行器实现，讲解font-size属性如何用于统一多个元素的视觉一致性。读完本文，你可以独立完成这道练习、理解其自动化测试的原理，并掌握为h1～h6建立字号比例体系的通用做法。
1. 挑战定位与文档结构
这道挑战存放在课程仓库的标准挑战目录中：
- 挑战文件：applied-visual-design/587d781c367417b2b2512ac2.md
其 YAML 前置元数据（frontmatter）声明了挑战的标识信息，其中id: 587d781c367417b2b2512ac2是唯一标识，dashedName为set-the-font-size-for-multiple-heading-elements，challengeType为0，另外还关联了视频课程与论坛主题（forumTopicId: 301067）。
在模块组织层面，该挑战的排课顺序由 applied-visual-design.json 中的challengeOrder数组决定。从源码结构看，这道题位于Use the text-transform Property to Make Text Uppercase（id...512ac0）之后，紧接着是姊妹题Set the font-weight for Multiple Heading Elements（id...512ac3），两者共同构成“为多个标题元素设置排版属性”的连续训练。
2. 核心概念：font-size 与视觉一致性
挑战文档给出的概念描述是：
font-size属性用于指定给定元素中文本的大小。这条规则可以用于多个元素，以创建页面中文本的视觉一致性（visual consistency）。
这正是本题的训练目标：不是只改一个标题，而是为h1到h6六个标题标签统一设置字号，让页面形成一套自上而下递减的标题层级。浏览器对h1～h6虽然有默认字号（从大到小），但默认值因浏览器而异；显式为每个标签指定像素值，是保证跨环境渲染一致、并建立可预测排版节奏的标准做法。
3. 任务要求：完整的字号层级表
挑战的# --instructions--部分给出了硬性要求——在<style>标签中设置以下字号：
| 选择器 | 要求的 font-size | 相对比例（以 h6 为 1 基准） |
|---|---|---|
h1 | 68px | 4.86 |
h2 | 52px | 3.71 |
h3 | 40px | 2.86 |
h4 | 32px | 2.29 |
h5 | 21px | 1.50 |
h6 | 14px | 1.00 |
可以看到这组数值形成一条平滑递减的字号曲线：68 → 52 → 40 → 32 → 21 → 14，相邻层级之间保持相近的收缩幅度，而不是断崖式跳变。这种比例化设置是标题体系（heading scale）的基本设计手法。
4. 动手实操：从种子代码到参考答案
4.1 种子代码（Seed）
挑战文件# --seed--部分提供了一份“空壳”起点，页面中已预置六个标题元素，<style>标签内留白待填：
<style> </style> <h1>This is h1 text</h1> <h2>This is h2 text</h2> <h3>This is h3 text</h3> <h4>This is h4 text</h4> <h5>This is h5 text</h5> <h6>This is h6 text</h6>4.2 参考答案（Solution）
挑战文件# --solutions--部分给出的完整答案为六条独立的选择器规则：
<style> h1 { font-size: 68px; } h2 { font-size: 52px; } h3 { font-size: 40px; } h4 { font-size: 32px; } h5 { font-size: 21px; } h6 { font-size: 14px; } </style> <h1>This is h1 text</h1> <h2>This is h2 text</h2> <h3>This is h3 text</h3> <h4>This is h4 text</h4> <h5>This is h5 text</h5> <h6>This is h6 text</h6>写法要点：
- 每条规则使用元素选择器（tag selector），直接命中对应标签的所有实例；
font-size的取值统一使用px单位。这一点并非随意——后文的测试断言是按字符串精确比较计算样式的，若写成68em或省略单位，断言将失败；- 六条规则互相独立，未使用选择器合并（如
h1, h2 { ... }），因为每条规则的值不同，分开书写最直观。
5. 测试机制：CSSHelp 如何验证你的样式
挑战文件# --hints--部分附带了六段测试断言，它们揭示了自动评测的实现方式。以h1为例：
const fontSizeOfh1 = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('font-size'); assert.equal(fontSizeOfh1, '68px');其余五个标签的断言结构完全一致，仅选择器与期望字符串不同：h2期望'52px'、h3期望'40px'、h4期望'32px'、h5期望'21px'、h6期望'14px'。
从断言代码可以读出三个实现事实：
- 测试运行在预览沙箱内：
__helpers是注入到挑战预览环境中的辅助对象，CSSHelp接收当前document并读取元素上的样式。在客户端代码中，预览页面由 frame.ts 构造，其中可以看到预览 iframe 的构建逻辑（主预览帧 id 为fcc-main-frame，测试运行器资源来自/js/test-runner/路径），并明确注释了框架自身的隐藏样式元素会带fcc-hide-header类，以避免干扰 CSS 相关测试——这说明课程对“测试读到的样式”与“框架注入的样式”做了隔离。 getStyle使用了可选链?.：断言写成getStyle('h1')?.getPropertyValue('font-size')，即当取不到样式对象时断言拿到undefined，与期望值'68px'比较后判负。换句话说，不写规则、或规则没生效，测试都会失败。- 比较的是字符串化的计算值：期望值形如
'68px'这样的完整字符串，意味着字号必须以像素写出且被浏览器规范化为该形式。这解释了第 4.2 节中“必须用 px”的要求。
6. 举一反三与自检清单
完成本题后，可以用以下清单快速自检，并迁移到实际项目中的标题体系设计：
- 六个标签是否各有独立规则？遗漏任何一个标签，对应的
assert.equal都会失败； - 每个数值是否严格等于要求（68/52/40/32/21/14）？测试是精确字符串匹配，近似值不算通过；
- 单位是否为
px？换用em、rem或裸数字都会导致断言不通过； - 规则是否写在
<style>标签内并被浏览器实际应用？仅存在选择器但值写错（如font-size: 68PX）同样失败。
这道题之后，同一模块紧接着的Set the font-weight for Multiple Heading Elements（挑战文件位于 applied-visual-design/587d781c367417b2b2512ac3.md）会把同样的“多元素统一属性”模式应用到字重上，两者合起来覆盖了标题排版中最核心的font-size与font-weight两个维度。
【免费下载链接】freeCodeCampfreeCodeCamp.org's open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
