CSS font-size 属性
属性定义及使用说明
font-size 属性用于设置字体大小。
font-size 不仅决定文本显示大小，还会影响 em、line-height、letter-spacing 等相关排版计算。
| 默认值： | medium |
|---|---|
| 继承： | yes |
| 版本： | CSS1 |
| JavaScript 语法： | object.style.fontSize="larger" |
/* <absolute-size>，绝对大小值 */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
/* <relative-size>，相对大小值 */
font-size: larger;
font-size: smaller;
/* <length>，长度值 */
font-size: 12px;
font-size: 0.8em;
/* <percentage>，百分比值 */
font-size: 80%;
font-size: inherit;
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
| 属性 | |||||
|---|---|---|---|---|---|
| font-size | 1.0 | 5.5 | 1.0 | 1.0 | 7.0 |
基本概念
font-size 用来设置元素中文字的大小。
浏览器默认根字体大小通常是 16px。
也就是说，默认情况下 html { font-size: 100%; } 通常等价于 html { font-size: 16px; }。
这个默认值会成为很多相对单位的计算基础。
实例
/* 设置页面默认字号 */
html {
font-size: 100%; /* 通常等价于 16px，尊重用户浏览器设置 */
}
/* 设置正文文字大小 */
body {
font-size: 16px; /* 常见正文基准字号 */
line-height: 1.6; /* 行高使用无单位写法，便于继承 */
}
/* 设置标题大小 */
h1 {
font-size: 2rem; /* 默认情况下约等于 32px */
}
html {
font-size: 100%; /* 通常等价于 16px，尊重用户浏览器设置 */
}
/* 设置正文文字大小 */
body {
font-size: 16px; /* 常见正文基准字号 */
line-height: 1.6; /* 行高使用无单位写法，便于继承 */
}
/* 设置标题大小 */
h1 {
font-size: 2rem; /* 默认情况下约等于 32px */
}
不建议随意把根元素字号固定为很小的值，因为这可能影响用户的浏览器字体偏好和无障碍体验。
font-size 的常见取值类型
font-size 可以使用关键字、长度单位、百分比和函数。
不同取值适合不同场景。
| 取值类型 | 示例 | 说明 | 适用场景 |
|---|---|---|---|
| 关键字 | small、large |
由浏览器按预设比例计算。 | 简单页面、需要跟随用户默认设置的场景。 |
| 绝对单位 | 16px、12pt |
大小相对固定，可控性强。 | 界面精确控制、打印样式。 |
| 相对单位 | 1rem、1.25em |
相对于父元素或根元素计算。 | 响应式设计、组件化页面。 |
| 视口单位 | 4vw、3vmin |
相对于浏览器视口尺寸计算。 | 大标题、展示页、流体排版。 |
| CSS 函数 | clamp()、calc() |
通过表达式动态计算字号。 | 现代响应式排版。 |
关键字值
CSS 提供两类字号关键字。
一类是绝对大小关键字，例如 small、medium、large。
另一类是相对大小关键字，例如 larger 和 smaller。
绝对大小关键字
绝对大小关键字不是固定像素值，而是浏览器根据默认字号换算出的等级。
| 关键字 | 默认 16px 下的近似值 | 比例 | 适用场景 |
|---|---|---|---|
xx-small |
约 9px | 0.56 倍 | 极小注释，不建议正文使用。 |
x-small |
约 10px | 0.625 倍 | 脚注或辅助信息。 |
small |
约 13px | 0.8 倍 | 辅助文字。 |
medium |
约 16px | 1 倍 | 默认正文。 |
large |
约 18px | 1.125 倍 | 小标题或强调文字。 |
x-large |
约 24px | 1.5 倍 | 标题。 |
xx-large |
约 32px | 2 倍 | 大标题。 |
xxx-large |
约 48px | 3 倍 | 展示型标题。 |
相对大小关键字
larger 和 smaller 会相对于父元素字号进行放大或缩小。
它们适合需要跟随父级字号变化的简单场景。
实例
/* 父元素字号为 16px */
.parent {
font-size: 16px;
}
/* larger 会相对父元素放大，具体比例由浏览器决定 */
.child-larger {
font-size: larger;
}
/* smaller 会相对父元素缩小，具体比例由浏览器决定 */
.child-smaller {
font-size: smaller;
}
.parent {
font-size: 16px;
}
/* larger 会相对父元素放大，具体比例由浏览器决定 */
.child-larger {
font-size: larger;
}
/* smaller 会相对父元素缩小，具体比例由浏览器决定 */
.child-smaller {
font-size: smaller;
}
关键字值对无障碍访问比较友好，但可控性较低，实际项目中更常使用
rem、em或clamp()。
绝对单位
绝对单位的值相对固定，不依赖父元素字号。
它们适合需要精确控制的界面，或者用于打印样式。
| 单位 | 含义 | 换算关系 | 适用场景 |
|---|---|---|---|
px |
CSS 逻辑像素。 | 屏幕中最常用的长度单位。 | 网页界面、组件字号。 |
pt |
印刷点。 | 1pt = 1/72 英寸，约等于 1.333px。 | 打印样式。 |
cm / mm |
厘米 / 毫米。 | 1cm = 37.8px，1mm = 3.78px。 | 打印排版，网页中较少使用。 |
in |
英寸。 | 1in = 96px。 | 打印或特殊尺寸换算。 |
pc |
派卡。 | 1pc = 12pt = 16px。 | 传统排版场景，网页中很少使用。 |
实例
/* 绝对单位换算关系 */
/* 1in = 96px = 2.54cm = 25.4mm = 6pc = 72pt */
/* 打印时通常使用 pt */
@media print {
body {
font-size: 12pt;
}
}
/* 屏幕显示通常使用 px、rem 或 clamp() */
@media screen {
body {
font-size: 16px;
}
}
/* 1in = 96px = 2.54cm = 25.4mm = 6pc = 72pt */
/* 打印时通常使用 pt */
@media print {
body {
font-size: 12pt;
}
}
/* 屏幕显示通常使用 px、rem 或 clamp() */
@media screen {
body {
font-size: 16px;
}
}
现代屏幕上 1px 通常指 CSS 逻辑像素，不一定等于一个物理像素。
相对单位
相对单位会根据参照值动态计算。
它们是现代响应式设计中最常用的字号单位。
| 单位 | 参照对象 | 说明 | 典型用法 |
|---|---|---|---|
em |
父元素或当前元素字号。 | 用于 font-size 时相对于父元素，嵌套时会叠乘。 |
局部组件缩放。 |
rem |
根元素 html 字号。 |
不受嵌套影响，计算更稳定。 | 全站字号体系。 |
% |
父元素字号。 | 在 font-size 中行为类似 em。 |
按父级比例缩放。 |
ch |
字符 0 的宽度。 |
更常用于控制行宽。 | width: 60ch; |
ex |
小写字母 x 的高度。 | 受字体设计影响较大。 | 少量特殊排版。 |
lh |
元素的行高。 | CSS Values 4 新增单位。 | 与行高对齐的间距。 |
em 与 rem 的区别
em 在设置 font-size 时，会相对于父元素字号计算。
如果多层嵌套都使用 em，字号会逐层叠乘。
rem 始终相对于根元素字号计算，因此更稳定。
实例
/* 根元素字号为 16px */
html {
font-size: 16px;
}
/* em 会受到父元素字号影响 */
.outer {
font-size: 1.5em; /* 16px × 1.5 = 24px */
}
.middle {
font-size: 1.5em; /* 24px × 1.5 = 36px */
}
/* rem 始终相对 html 计算 */
.outer-rem {
font-size: 1.5rem; /* 16px × 1.5 = 24px */
}
.middle-rem {
font-size: 1.5rem; /* 16px × 1.5 = 24px，不会叠乘 */
}
html {
font-size: 16px;
}
/* em 会受到父元素字号影响 */
.outer {
font-size: 1.5em; /* 16px × 1.5 = 24px */
}
.middle {
font-size: 1.5em; /* 24px × 1.5 = 36px */
}
/* rem 始终相对 html 计算 */
.outer-rem {
font-size: 1.5rem; /* 16px × 1.5 = 24px */
}
.middle-rem {
font-size: 1.5rem; /* 16px × 1.5 = 24px，不会叠乘 */
}
在
font-size上使用em时，它相对父元素字号；但在同一元素的padding或margin上使用em时，它相对该元素自身字号。
视口单位
视口单位会根据浏览器窗口大小计算。
它们适合实现随屏幕宽度变化的流体排版。
但是单独使用视口单位可能导致手机上过小、超宽屏上过大。
| 单位 | 含义 | 说明 | 典型场景 |
|---|---|---|---|
vw |
视口宽度的 1%。 | 视口越宽，字号越大。 | 响应式标题。 |
vh |
视口高度的 1%。 | 移动端会受到浏览器工具栏影响。 | 全屏展示页。 |
vmin |
vw 和 vh 中较小值的 1%。 |
适合兼顾横屏和竖屏。 | 自适应大标题。 |
vmax |
vw 和 vh 中较大值的 1%。 |
变化幅度更大。 | 展示型视觉设计。 |
svh / dvh / lvh |
小 / 动态 / 大视口高度。 | 用于解决移动端浏览器工具栏变化问题。 | 移动端全屏页面。 |
cqi / cqb |
容器查询单位。 | 相对容器尺寸，而不是整个视口。 | 组件级响应式排版。 |
实例
/* 单独使用 vw 时，字号缩放可能过于激进 */
h1 {
font-size: 5vw;
}
/* 更推荐使用 clamp() 设置上下限 */
h1 {
font-size: clamp(1.5rem, 5vw, 3.5rem);
}
/* 容器查询单位适合组件级响应式设计 */
.card {
container-type: inline-size;
}
.card-title {
font-size: clamp(1rem, 4cqi, 2rem);
}
h1 {
font-size: 5vw;
}
/* 更推荐使用 clamp() 设置上下限 */
h1 {
font-size: clamp(1.5rem, 5vw, 3.5rem);
}
/* 容器查询单位适合组件级响应式设计 */
.card {
container-type: inline-size;
}
.card-title {
font-size: clamp(1rem, 4cqi, 2rem);
}
容器查询单位适合组件库和卡片布局，因为组件大小不一定等于浏览器视口大小。
clamp() 函数
clamp() 是现代响应式排版中非常实用的函数。
它可以把字号限制在最小值和最大值之间。
中间值通常使用视口单位或计算表达式，让字号随屏幕变化。
| 参数 | 含义 | 示例 | 说明 |
|---|---|---|---|
| 最小值 | 字号不会小于这个值。 | 1rem |
保证移动端可读性。 |
| 首选值 | 浏览器优先尝试使用这个动态值。 | 2vw + 1rem |
让字号随屏幕流体变化。 |
| 最大值 | 字号不会大于这个值。 | 3rem |
避免大屏文字过大。 |
实例
/* clamp(最小值, 首选值, 最大值) */
h1 {
font-size: clamp(1.75rem, 2.5vw + 1rem, 3.5rem);
}
h2 {
font-size: clamp(1.25rem, 2vw + 0.75rem, 2.25rem);
}
p {
font-size: clamp(1rem, 1vw + 0.5rem, 1.25rem);
}
/* 搭配 CSS 变量构建设计系统 */
:root {
--text-sm: clamp(0.8rem, 1.5vw + 0.25rem, 0.95rem);
--text-md: clamp(1rem, 2vw + 0.5rem, 1.25rem);
--text-lg: clamp(1.25rem, 3vw + 0.5rem, 2rem);
--text-xl: clamp(1.75rem, 4vw + 0.75rem, 3.5rem);
}
.article-title {
font-size: var(--text-xl);
}
h1 {
font-size: clamp(1.75rem, 2.5vw + 1rem, 3.5rem);
}
h2 {
font-size: clamp(1.25rem, 2vw + 0.75rem, 2.25rem);
}
p {
font-size: clamp(1rem, 1vw + 0.5rem, 1.25rem);
}
/* 搭配 CSS 变量构建设计系统 */
:root {
--text-sm: clamp(0.8rem, 1.5vw + 0.25rem, 0.95rem);
--text-md: clamp(1rem, 2vw + 0.5rem, 1.25rem);
--text-lg: clamp(1.25rem, 3vw + 0.5rem, 2rem);
--text-xl: clamp(1.75rem, 4vw + 0.75rem, 3.5rem);
}
.article-title {
font-size: var(--text-xl);
}
min() 与 max() 函数
min() 会在多个值中取较小值。
max() 会在多个值中取较大值。
它们可以用于字号，但在流体排版中通常不如 clamp() 直观。
| 函数 | 行为 | 示例 | 适用场景 |
|---|---|---|---|
min() |
选择较小的计算结果。 | min(5vw, 48px) |
只限制最大值。 |
max() |
选择较大的计算结果。 | max(1rem, 2vw) |
只限制最小值。 |
clamp() |
同时设置最小值、首选值和最大值。 | clamp(1rem, 2vw, 2rem) |
完整流体字号方案。 |
实例
/* 字号不会超过 48px，但在小屏上可能过小 */
h1 {
font-size: min(5vw, 48px);
}
/* 字号不会小于 16px，但在大屏上可能过大 */
h2 {
font-size: max(16px, 3vw);
}
/* 同时限制最小值和最大值，更适合真实项目 */
h3 {
font-size: clamp(16px, 3vw, 32px);
}
h1 {
font-size: min(5vw, 48px);
}
/* 字号不会小于 16px，但在大屏上可能过大 */
h2 {
font-size: max(16px, 3vw);
}
/* 同时限制最小值和最大值，更适合真实项目 */
h3 {
font-size: clamp(16px, 3vw, 32px);
}
calc() 函数
calc() 可以在 CSS 中混合不同单位做计算。
它常用于把固定值和相对值组合起来。
在字号场景中，calc() 常与 vw、rem 一起使用。
实例
/* 使用 calc() 组合 rem 和 vw */
h1 {
font-size: calc(1.5rem + 2vw);
}
/* 在 clamp() 中使用 calc()，写法更清晰 */
h2 {
font-size: clamp(1.25rem, calc(1rem + 2vw), 3rem);
}
/* 注意运算符两侧需要保留空格 */
p {
font-size: calc(1rem + 0.25vw);
}
h1 {
font-size: calc(1.5rem + 2vw);
}
/* 在 clamp() 中使用 calc()，写法更清晰 */
h2 {
font-size: clamp(1.25rem, calc(1rem + 2vw), 3rem);
}
/* 注意运算符两侧需要保留空格 */
p {
font-size: calc(1rem + 0.25vw);
}
calc(1rem+2vw)这类写法是错误的，运算符两侧应该写空格，例如calc(1rem + 2vw)。
继承与级联
font-size 是可继承属性。
如果子元素没有声明字号，它会继承父元素计算后的字号。
这也是 em 嵌套时容易出现叠乘问题的原因之一。
实例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>font-size 继承示例</title>
<style>
.article {
font-size: 18px; /* 子元素默认继承这个字号 */
}
.article p {
font-size: 1em; /* 等于 18px */
}
.article .note {
font-size: 0.875em; /* 18px × 0.875 = 15.75px */
}
</style>
</head>
<body>
<div class="article">
<p>这是一段正文。</p>
<p class="note">这是一段较小的说明文字。</p>
</div>
</body>
</html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>font-size 继承示例</title>
<style>
.article {
font-size: 18px; /* 子元素默认继承这个字号 */
}
.article p {
font-size: 1em; /* 等于 18px */
}
.article .note {
font-size: 0.875em; /* 18px × 0.875 = 15.75px */
}
</style>
</head>
<body>
<div class="article">
<p>这是一段正文。</p>
<p class="note">这是一段较小的说明文字。</p>
</div>
</body>
</html>
最佳实践
实际项目中，不建议所有文字都直接写死为 px。
更好的方式是使用根字号、CSS 变量和 clamp() 组合出稳定的字号系统。
| 不推荐写法 | 推荐写法 | 原因 |
|---|---|---|
font-size: 12px; 用作大段正文。 |
font-size: 1rem; |
正文过小会影响阅读体验。 |
多层组件全部使用 em。 |
全局字号使用 rem，局部缩放再用 em。 |
避免嵌套叠乘导致字号失控。 |
标题只写 font-size: 6vw;。 |
font-size: clamp(1.75rem, 4vw, 3.5rem); |
避免小屏过小、大屏过大。 |
| 在不同页面随意定义字号。 | 使用 CSS 变量统一字号阶梯。 | 便于维护一致的视觉系统。 |
实例
/* 推荐：使用 CSS 变量管理字号体系 */
:root {
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: clamp(1.5rem, 3vw, 2.5rem);
--font-size-hero: clamp(2rem, 6vw, 4.5rem);
}
body {
font-size: var(--font-size-base);
line-height: 1.6;
}
.caption {
font-size: var(--font-size-sm);
}
.article-title {
font-size: var(--font-size-xl);
}
.hero-title {
font-size: var(--font-size-hero);
}
:root {
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: clamp(1.5rem, 3vw, 2.5rem);
--font-size-hero: clamp(2rem, 6vw, 4.5rem);
}
body {
font-size: var(--font-size-base);
line-height: 1.6;
}
.caption {
font-size: var(--font-size-sm);
}
.article-title {
font-size: var(--font-size-xl);
}
.hero-title {
font-size: var(--font-size-hero);
}
一般可以用
rem建立全局字号体系，用em做局部比例缩放，用clamp()处理响应式标题。
推荐的字体比例系统
以下是一套基于 Modular Scale 思路的字号 Token 体系。
每个 Token 都使用 clamp() 确保在最小和最大屏幕下都有合适大小。
| Token | 用途 | clamp() 推荐值 | 备注 |
|---|---|---|---|
--text-xs |
标签、角标 | clamp(0.7rem, 0.5vw + 0.5rem, 0.8rem) |
不建议低于 11px。 |
--text-sm |
辅助文字、说明 | clamp(0.85rem, 0.8vw + 0.6rem, 0.95rem) |
常见于注释和次要信息。 |
--text-md |
正文基准 | clamp(1rem, 1vw + 0.75rem, 1.125rem) |
推荐作为默认正文字号。 |
--text-lg |
副标题 | clamp(1.15rem, 1.5vw + 0.8rem, 1.5rem) |
文章或卡片小标题。 |
--text-xl |
h3 级标题 | clamp(1.25rem, 2vw + 0.75rem, 2rem) |
小节标题。 |
--text-2xl |
h2 级标题 | clamp(1.5rem, 2.5vw + 1rem, 2.5rem) |
章节标题。 |
--text-3xl |
h1 级标题 | clamp(2rem, 4vw + 1rem, 3.5rem) |
页面主标题。 |
--text-hero |
展示型大标题 | clamp(2.5rem, 6vw + 1rem, 5rem) |
首页或 Landing 标题。 |
实例
/* 推荐：使用 clamp() + CSS 变量管理字号体系 */
:root {
--text-xs: clamp(0.7rem, 0.5vw + 0.5rem, 0.8rem);
--text-sm: clamp(0.85rem, 0.8vw + 0.6rem, 0.95rem);
--text-md: clamp(1rem, 1vw + 0.75rem, 1.125rem);
--text-lg: clamp(1.15rem, 1.5vw + 0.8rem, 1.5rem);
--text-xl: clamp(1.25rem, 2vw + 0.75rem, 2rem);
--text-2xl: clamp(1.5rem, 2.5vw + 1rem, 2.5rem);
--text-3xl: clamp(2rem, 4vw + 1rem, 3.5rem);
--text-hero: clamp(2.5rem, 6vw + 1rem, 5rem);
}
body {
font-size: var(--text-md);
line-height: 1.6;
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
small { font-size: var(--text-sm); }
:root {
--text-xs: clamp(0.7rem, 0.5vw + 0.5rem, 0.8rem);
--text-sm: clamp(0.85rem, 0.8vw + 0.6rem, 0.95rem);
--text-md: clamp(1rem, 1vw + 0.75rem, 1.125rem);
--text-lg: clamp(1.15rem, 1.5vw + 0.8rem, 1.5rem);
--text-xl: clamp(1.25rem, 2vw + 0.75rem, 2rem);
--text-2xl: clamp(1.5rem, 2.5vw + 1rem, 2.5rem);
--text-3xl: clamp(2rem, 4vw + 1rem, 3.5rem);
--text-hero: clamp(2.5rem, 6vw + 1rem, 5rem);
}
body {
font-size: var(--text-md);
line-height: 1.6;
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
small { font-size: var(--text-sm); }
推荐做法与避免做法
下面列出几组常见场景下的推荐与不推荐写法。
| 场景 | 不推荐写法 | 推荐写法 |
|---|---|---|
| 根字号设置 | html { font-size: 10px; } |
html { font-size: 100%; } |
| 正文字号 | p { font-size: 14px; } |
p { font-size: 1rem; } |
| 标题字号 | h1 { font-size: 48px; } |
h1 { font-size: clamp(1.75rem, 4vw + 1rem, 3.5rem); } |
| 小号文字 | small { font-size: 11px; } |
small { font-size: max(0.75rem, 12px); } |
| 响应式字号 | 用多个 @media 断点切换固定值 |
使用 clamp() 实现流体过渡 |
| 无障碍 | html { font-size: 62.5%; } |
不设置根字号，或使用 100% |
不要在
html或body上用固定px设置根字号，这会覆盖用户在浏览器中设置的偏好字号，导致大字体辅助功能失效。
clamp() 流体字号公式推导
clamp() 的中间值通常使用视口单位加上一个 rem 基准。
这样可以形成"锚点 + 斜率"的线性插值公式，精确控制字号在不同屏幕宽度下的变化速率。
公式推导步骤
假设需要在视口 320px 到 1240px 之间，让字号从 16px 平滑过渡到 24px。
| 步骤 | 公式 | 本例计算 |
|---|---|---|
| 1. 计算斜率 | (最大px - 最小px) / (最大vp - 最小vp) | (24 - 16) / (1240 - 320) = 0.00869，约 0.87vw |
| 2. 计算截距 | 最小px - 斜率 × 最小vp | 16 - 0.00869 × 320 = 13.2px，约 0.825rem |
| 3. 得出首选值 | 斜率 × 100vw + 截距 | 0.87vw + 0.825rem |
实例
/* 公式：preferred = 斜率 × 100vw + 截距 */
/* 斜率 = (最大px - 最小px) / (最大vp - 最小vp) */
/* 截距 = 最小px - 斜率 × 最小vp */
/* 示例：在 320px~1240px 视口间从 16px 过渡到 24px */
/* 斜率 = (24-16) / (1240-320) = 0.00869 ≈ 0.87vw */
/* 截距 = 16 - 0.00869×320 ≈ 13.2px ≈ 0.825rem */
p {
font-size: clamp(1rem, 0.87vw + 0.825rem, 1.5rem);
}
/* 斜率 = (最大px - 最小px) / (最大vp - 最小vp) */
/* 截距 = 最小px - 斜率 × 最小vp */
/* 示例：在 320px~1240px 视口间从 16px 过渡到 24px */
/* 斜率 = (24-16) / (1240-320) = 0.00869 ≈ 0.87vw */
/* 截距 = 16 - 0.00869×320 ≈ 13.2px ≈ 0.825rem */
p {
font-size: clamp(1rem, 0.87vw + 0.825rem, 1.5rem);
}
clamp()在 Chrome 79+、Firefox 75+、Safari 13.1+、Edge 79+ 均已支持，可安全用于生产环境。
min() 与 max() 函数详解
min(a, b, ...) 返回多个值中的最小值，效果相当于设置"上限"。
max(a, b, ...) 返回多个值中的最大值，效果相当于设置"下限"。
它们可以接收任意数量参数，参数之间可以混用不同单位。
| 函数 | 行为 | 效果 | 适用场景 |
|---|---|---|---|
min() |
选择所有参数中的最小值 | 设置上限 | 防止字号过大。 |
max() |
选择所有参数中的最大值 | 设置下限 | 保证最小可读字号。 |
clamp() |
同时限制最小值、首选值和最大值 | 设置上下限 | 完整流体字号方案。 |
实例
/* min() — 字号不超过 2rem */
h2 {
font-size: min(5vw, 2rem);
}
/* max() — 字号不低于 1rem */
small {
font-size: max(0.75vw, 1rem);
}
/* 组合：min 和 max 等价于 clamp */
/* clamp(MIN, VAL, MAX) 等价于 max(MIN, min(VAL, MAX)) */
h1 {
font-size: max(1.5rem, min(4vw, 3rem));
}
/* 多个参数：取三者中最小值 */
.label {
font-size: min(1rem, 3vw, 14px);
}
/* 混合单位 */
.fluid {
font-size: max(12px, 1.2vw + 0.5rem);
}
h2 {
font-size: min(5vw, 2rem);
}
/* max() — 字号不低于 1rem */
small {
font-size: max(0.75vw, 1rem);
}
/* 组合：min 和 max 等价于 clamp */
/* clamp(MIN, VAL, MAX) 等价于 max(MIN, min(VAL, MAX)) */
h1 {
font-size: max(1.5rem, min(4vw, 3rem));
}
/* 多个参数：取三者中最小值 */
.label {
font-size: min(1rem, 3vw, 14px);
}
/* 混合单位 */
.fluid {
font-size: max(12px, 1.2vw + 0.5rem);
}
calc() 函数详解
calc() 支持加减乘除四则运算，可以混用任意单位。
在字号场景中，常与 rem 和 vw 搭配使用。
四则运算规则
| 运算 | 语法 | 限制 | 示例 |
|---|---|---|---|
| 加法 | calc(1rem + 0.5vw) |
运算符两侧必须有空格。 | font-size: calc(1rem + 0.5vw); |
| 减法 | calc(2rem - 4px) |
运算符两侧必须有空格。 | font-size: calc(2rem - 4px); |
| 乘法 | calc(1.5 * 16px) |
其中一个值必须无单位。 | font-size: calc(1.5 * 16px); |
| 除法 | calc(24px / 1.5) |
右侧必须为无单位数，且不为 0。 | font-size: calc(24px / 1.5); |
calc(1rem+2px)是错误写法，运算符两侧应该写空格，正确写法是calc(1rem + 2px)。
实例
/* 基础四则运算 */
font-size: calc(1rem + 0.5vw); /* 加法 */
font-size: calc(2rem - 4px); /* 减法 */
font-size: calc(1.5 * 16px); /* 乘法（一个必须为无单位数）*/
font-size: calc(24px / 1.5); /* 除法（右侧必须为无单位数）*/
/* 搭配 CSS 变量 */
:root {
--scale: 1.25;
--base: 1rem;
}
h3 {
font-size: calc(var(--base) * var(--scale));
}
/* 嵌套 calc（现代浏览器支持省略内层 calc）*/
font-size: calc(clamp(1rem, 2vw, 2rem) * 0.8);
font-size: calc(1rem + 0.5vw); /* 加法 */
font-size: calc(2rem - 4px); /* 减法 */
font-size: calc(1.5 * 16px); /* 乘法（一个必须为无单位数）*/
font-size: calc(24px / 1.5); /* 除法（右侧必须为无单位数）*/
/* 搭配 CSS 变量 */
:root {
--scale: 1.25;
--base: 1rem;
}
h3 {
font-size: calc(var(--base) * var(--scale));
}
/* 嵌套 calc（现代浏览器支持省略内层 calc）*/
font-size: calc(clamp(1rem, 2vw, 2rem) * 0.8);
使用 calc 构建模块化字体比例尺
通过 calc() 和 CSS 变量，可以实现一个基于固定比例的字号阶梯。
以下示例使用 Major Third（1.25）比例。
实例
/* 使用 calc + CSS 变量实现 Major Third (1.25) 比例 */
:root {
--ratio: 1.25;
--step-0: 1rem; /* 16px */
--step-1: calc(var(--step-0) * var(--ratio)); /* 20px */
--step-2: calc(var(--step-1) * var(--ratio)); /* 25px */
--step-3: calc(var(--step-2) * var(--ratio)); /* 31.25px */
--step--1: calc(var(--step-0) / var(--ratio)); /* 12.8px */
}
p { font-size: var(--step-0); }
h3 { font-size: var(--step-1); }
h2 { font-size: var(--step-2); }
h1 { font-size: var(--step-3); }
small { font-size: var(--step--1); }
:root {
--ratio: 1.25;
--step-0: 1rem; /* 16px */
--step-1: calc(var(--step-0) * var(--ratio)); /* 20px */
--step-2: calc(var(--step-1) * var(--ratio)); /* 25px */
--step-3: calc(var(--step-2) * var(--ratio)); /* 31.25px */
--step--1: calc(var(--step-0) / var(--ratio)); /* 12.8px */
}
p { font-size: var(--step-0); }
h3 { font-size: var(--step-1); }
h2 { font-size: var(--step-2); }
h1 { font-size: var(--step-3); }
small { font-size: var(--step--1); }
继承与级联
font-size 是可继承属性。
子元素如果没有显式设置字号，会继承父元素的计算值，而不是声明值。
继承计算过程
下面展示一个典型的字号继承链。
| 选择器 | 声明值 | 计算结果 | 说明 |
|---|---|---|---|
html |
100% |
16px | 浏览器默认值。 |
body |
inherit | 16px | 从 html 继承。 |
.article |
1.125rem |
18px | 基于根字号计算。 |
.article p |
inherit | 18px | 继承的是计算后的 18px，而不是 1.125rem。 |
.article em |
1em |
18px | em 基于父元素计算值，1 × 18px = 18px。 |
优先级与层叠顺序
当多个规则同时设置 font-size 时，按以下优先级从高到低生效。
| 优先级 | 来源 | 示例 |
|---|---|---|
| 1（最高） | !important 内联样式 |
<p style="font-size: 20px !important"> |
| 2 | !important 样式表规则 |
p { font-size: 20px !important; } |
| 3 | 内联样式 | <p style="font-size: 18px"> |
| 4 | ID 选择器 | #title { font-size: 24px; } |
| 5 | 类 / 伪类 / 属性选择器 | .heading { font-size: 22px; } |
| 6 | 元素 / 伪元素选择器 | p { font-size: 16px; } |
| 7（最低） | 继承 / 浏览器默认样式 | 来自父元素或浏览器默认。 |
实例
/* 优先级由高到低 */
/* 1. !important 内联样式 */
/* <p style="font-size: 20px !important"> */
/* 2. !important 样式表规则 */
p { font-size: 20px !important; }
/* 3. 内联样式 */
/* <p style="font-size: 18px"> */
/* 4. ID 选择器 */
#title { font-size: 24px; }
/* 5. 类/伪类/属性选择器 */
.heading { font-size: 22px; }
/* 6. 元素/伪元素选择器 */
p { font-size: 16px; }
/* 7. 继承 / 浏览器默认样式 */
/* 1. !important 内联样式 */
/* <p style="font-size: 20px !important"> */
/* 2. !important 样式表规则 */
p { font-size: 20px !important; }
/* 3. 内联样式 */
/* <p style="font-size: 18px"> */
/* 4. ID 选择器 */
#title { font-size: 24px; }
/* 5. 类/伪类/属性选择器 */
.heading { font-size: 22px; }
/* 6. 元素/伪元素选择器 */
p { font-size: 16px; }
/* 7. 继承 / 浏览器默认样式 */
不要在
html或body上用固定px设置根字号，这会覆盖用户的浏览器字体偏好。请使用html { font-size: 100%; }或者干脆不设置。
交互演示
通过下面的演示，你可以直观地看到不同单位下的字号效果。
选择单位类型并拖动数值滑块，预览区域会实时更新。
font-size 单位换算与预览
16px
CSS font-size 教程示例文字
总结
font-size 是 CSS 排版系统的基础属性。
px 适合精确控制，rem 适合全局字号体系，em 适合局部缩放。
视口单位适合流体排版，但最好配合 clamp() 限制上下边界。
在真实项目中，推荐使用 CSS 变量统一管理字号，并优先保证可读性和响应式体验。
屏幕正文推荐 rem + clamp()，打印样式用 pt。
不要锁定根字号，永远给小号文字设置最小值下限（建议不低于 12px / 0.75rem）。
组件级响应式优先考虑容器查询单位 cqi / cqb。
相关文章
CSS 教程: CSS Font
CSS 参考手册: font 属性