freeCodeCamp Basic CSS 课程实战用 font-family 设置元素的字体族【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp本文基于 freeCodeCamp 开源课程curriculum中 Basic CSS 板块的挑战Set the Font Family of an Element挑战文件展开。通过这篇指南你可以完整掌握 CSSfont-family属性的用法、通用字体族monospace/serif/sans-serif的含义、字体回退链的书写规则并理解 freeCodeCamp 课程挑战文件从种子代码seed、测试断言到参考解答solution的完整结构与校验机制。挑战定位与核心目标font-family属性用于指定元素应当使用哪种字体。freeCodeCamp 的 Basic CSS 板块以经典的 CatPhotoApp 示例页为载体让学习者在同一个真实页面骨架上逐步叠加 CSS 能力。本挑战是 basic-css.json 中列出的第 6 个挑战紧接在 Change the Font Size of an Element 之后其后续两个挑战分别是 Import a Google Fontbad87fee1348bd9aedf08807.md和 Specify How Fonts Should Degradebad87fee1348bd9aedf08808.md共同构成字体样式知识小节的递进链条。本挑战的任务指令原文是Make all of yourpelements use themonospacefont.即让页面中所有p元素使用等宽字体monospace。font-family 属性与通用字体族文档给出的最简示例是为h2元素设置无衬线字体h2 { font-family: sans-serif; }浏览器普遍内置若干通用字体族generic font families其中最常用的三个是通用字体族含义典型使用场景monospace等宽字体每个字符宽度相同代码、日志、表格数字对齐serif衬线字体笔画末端有装饰长文阅读、书籍排版sans-serif无衬线字体现代网页正文、界面文字通用字体族名不区分大小写且由于它们是 CSS 关键字书写时不需要加引号。与之相对的是具体字体族名如Lobster、Helvetica族名区分大小写且如果名称中包含空格如Open Sans则必须加引号——这一点在下一课 Import a Google Font 的正文中有明确说明。种子代码Seed与参考答案Solution挑战以一段完整的 HTML 页面作为起点其中style块只定义了.red-text颜色与p的字号尚未指定任何字体族style .red-text { color: red; } p { font-size: 16px; } /style h2 classred-textCatPhotoApp/h2 main p classred-textClick here to view more a href#cat photos/a./p a href#img srchttps://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg altA cute orange cat lying on its back./a div pThings cats love:/p ul licatnip/li lilaser pointers/li lilasagna/li /ul pTop 3 things cats hate:/p ol liflea treatment/li lithunder/li liother cats/li /ol /div form actionhttps://freecatphotoapp.com/submit-cat-photo labelinput typeradio nameindoor-outdoor checked Indoor/label labelinput typeradio nameindoor-outdoor Outdoor/labelbr labelinput typecheckbox namepersonality checked Loving/label labelinput typecheckbox namepersonality Lazy/label labelinput typecheckbox namepersonality Energetic/labelbr input typetext placeholdercat photo URL required button typesubmitSubmit/button /form /main注意p选择器是元素选择器element selector它会命中页面内所有p标签包括p classred-text、Things cats love:、Top 3 things cats hate: 三处段落。这正是Makeall of yourpelements use themonospacefont要求的全部覆盖范围。参考解答只在既有p规则中追加一行声明p { font-size: 16px; font-family: monospace; }完整解答中的style块为style .red-text { color: red; } p { font-size: 16px; font-family: monospace; } /style其余 HTML 结构保持不变。解答的关键点在于把font-family写进已经存在的p规则里而不是新建一条重复选择器的规则保持样式声明的集中管理。测试断言如何验证你的解答挑战文件中# --hints--区块内置了自动化测试用于判定解答是否通过const notRed document.querySelector(p:not(.red-text)); const fontFamily window.getComputedStyle(notRed)[font-family]; assert.match(fontFamily, /monospace/i);这段断言值得细读它揭示了两个测试设计细节选择非红色段落p:not(.red-text)特意避开p classred-text检查的是未带特殊类名的普通段落防止学习者只对某一类p生效而漏掉其他段落。读取计算样式而非源码window.getComputedStyle(...)拿到的是浏览器最终生效的font-family值因此即使写法略有差异大小写不同正则/monospace/i的i标志也保证大小写不敏感地通过。这与 CSS 规范中通用字体族名不区分大小写的说明是一致的。挑战文件的结构与仓库中的校验本挑战是一个 Markdown 挑战文件采用 freeCodeCamp 课程约定的分节标记组织内容YAML 前置元数据 --description--概念讲解、--instructions--任务指令、--hints--提示与断言、--seed--起始代码、--solutions--参考解答。其前置元数据为id: bad87fee1348bd9aede08807 title: Set the Font Family of an Element challengeType: 0 videoUrl: https://scrimba.com/c/c3bvpCg forumTopicId: 18278 dashedName: set-the-font-family-of-an-element这些字段并非随意填写——challenge-schema.js 中的 Joi schema 会对它们做强制校验例如challengeType被约束为 0–33 的整数dashedName必须匹配^[a-z0-9-]$的 slug 正则。dashedName: set-the-font-family-of-an-element即由标题小写化并连字符化而来用于生成学习路径上的 URL 片段。从 basic-css.json 的challengeOrder数组也可以看到该id与标题在此文件中按学习顺序注册blockLayout标记为legacy-challenge-list。从字体回退看 font-family 的进阶用法虽然本挑战只使用单一通用字体族但font-family真正强大的用法是声明字体回退链当首选字体不可用时浏览器按顺序回退到下一个候选。紧接其后的挑战 Specify How Fonts Should Degrade 正是这个主题的延伸p { font-family: Helvetica, sans-serif; }该课说明当Helvetica不可用时元素会退化为sans-serif并强调回退链惯例是自定义字体在前、通用字体族收尾。freeCodeCamp 站点自身的样式表恰好是这一惯例的现成实例——variables.css 中定义了全局字体变量--font-family-sans-serif: Lato, sans-serif; --font-family-monospace: Hack-ZeroSlash, monospace;可以看到具体字体族Lato、Hack-ZeroSlash含连字符的族名加引号排在前面末尾以通用字体族sans-serif/monospace兜底与课程教导的规则完全一致。而 fonts.css 中成组出现的font-face声明Lato的 Light/Regular/Italic/Bold/Black 多个字重则展示了自定义字体族的注册侧先通过font-face把本地 woff 文件与字体族名绑定页面各处才能通过font-family: Lato引用。这与课程中通过link引入 Google Fonts 的Lobster是同一种机制的不同分发方式。小结与实践清单围绕本挑战文件可以沉淀出以下可直接复用的要点设置字体font-family写在目标选择器规则内即可如p { font-family: monospace; }元素选择器天然覆盖页面内所有同名标签。通用字体族monospace、serif、sans-serif是浏览器保证可用的兜底字体不区分大小写、无需引号。具体字体族区分大小写含空格必须加引号推荐写成具体字体, 通用字体的回退链例如Lato, sans-serif。验证方式freeCodeCamp 的测试通过getComputedStyle读取计算样式并正则匹配关注的是最终生效值理解这一点可以避免源码看起来对、实际没生效的调试误区。课程组织挑战元数据由 challenge-schema.js 校验学习顺序由 basic-css.json 的challengeOrder维护dashedName决定路由 slug——这套结构保证了 16000 个挑战文件的格式一致性与可检索性。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考