字体大小、粗细与样式
使用 font-size 控制文字大小,使用 font-weight 控制粗细,使用 font-style 控制样式。
字体大小、粗细与样式 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 2 节课,共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分,你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
font-size
font-size 设置字形的高度。它接受任意长度单位。建议使用 rem,以实现可缩放且易于访问的排版。
<h1>Heading (2.5rem)</h1>
<p>Body text (1rem)</p>
<small>Fine print (0.75rem)</small>
关键字字体大小
CSS 还提供绝对关键字大小(xx-small 到 xx-large)以及相对于父元素字体大小的相对关键字(smaller、larger)。
<p class="note">Smaller note text</p>
<p class="big">Extra large text</p>
font-weight
font-weight 设置文本粗细。您可以使用数值(100–900,每次递增 100)或关键字:
<p class="thin">Thin weight (100)</p>
<p>Normal body weight (400) with <strong>bold strong text (700)</strong></p>
<p class="heavy">Heavy weight (900)</p>
font-weight 与可变字体
对于可变字体,任意整数形式的字重(例如 font-weight: 550)都有效,字体会在已定义的轴之间进行插值。这样可以对排版进行更精细的控制。
font-style
font-style 控制斜体和倾斜体的呈现:
<p>This has <em>italic emphasis</em> inline.</p>
<p class="normal">Normal style text</p>
<p class="oblique">Oblique 20deg text</p>
font-variant
font-variant 可启用小型大写字母等排版特性:
<p>The <abbr title="Cascading Style Sheets">CSS</abbr> abbreviation uses small-caps.</p>
font 简写属性
font 简写属性将样式、变体、字重、字号、行高和字体系列组合在一起:
<p>Shorthand font: italic bold 1.1rem/1.6 Roboto.</p>
响应式字体大小缩放
使用 clamp() 创建流式排版,使字体大小在最小值和最大值之间平滑缩放:
<h1>Resize the window — this heading scales fluidly.</h1>
用于提高可读性的 line-height
line-height 设置行与行之间的垂直间距。建议使用无单位值(例如 1.5),因为它会随后代元素的字体大小缩放。
<h1>Tight Heading Line Height</h1>
<p>Body copy with relaxed 1.5 line-height wraps across multiple lines for comfortable reading, demonstrating the effect of the line-height property on paragraph text blocks.</p>
letter-spacing 与 word-spacing
letter-spacing 增加字符之间的间距;word-spacing 增加单词之间的间距。请使用 em 单位,使间距随字体大小缩放。
<h2 class="heading">Spaced Out Heading Text</h2>
无障碍字体大小设置
切勿在 html 或 body 元素上使用 px 设置 font-size。这会覆盖浏览器中由用户设置的字体大小偏好。请改用基于浏览器默认值的 rem 单位。
快速检查
哪个 font-weight 数值与关键字 bold 等效?
回顾
使用 rem 设置 font-size,以尊重用户偏好。font-weight 接受 100–900 的数值或关键字。font 简写属性可以组合多个属性。使用 clamp() 实现流式排版,并使用无单位的 line-height 保持间距一致。
常见问题解答
「字体大小、粗细与样式」课时是免费的吗?
是的 — 「字体大小、粗细与样式」的完整文本可在网页上免费阅读。要进行交互式练习(内置代码编辑器和全天候 AI 导师)并解锁 CSS Academy 课程的其余内容,请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「字体大小、粗细与样式」这节课中我会学到什么?
使用 font-size 控制文字大小,使用 font-weight 控制粗细,使用 font-style 控制样式。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy,全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗?
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者,你可以从这里开始或从头开始,按照自己的节奏学习。 这是第 2 节课,共 4 节。
「字体大小、粗细与样式」课时需要多长时间?
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动,所以你能稳步进步,并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗?
能。每节 CSS Academy 课都包含内置代码编辑器,你可以在浏览器中直接编写并运行真实代码,并获得即时 AI 反馈 — 无需本地设置。