CSS字体大小[编辑 | 编辑源代码]

CSS字体大小（font-size）属性用于设置文本内容的显示尺寸，是网页排版的核心属性之一。通过控制字体大小，开发者可以创建层次分明的视觉结构，优化可读性，并实现响应式设计。

基本语法[编辑 | 编辑源代码]

font-size属性的基础语法如下：

selector {
    font-size: value;
}

单位系统[编辑 | 编辑源代码]

CSS提供多种单位来定义字体大小：

绝对单位[编辑 | 编辑源代码]

单位	描述	示例
px	像素（1/96英寸）	`font-size: 16px;`
pt	点（1/72英寸）	`font-size: 12pt;`
cm/mm/in	物理尺寸单位	`font-size: 0.5cm;`

相对单位[编辑 | 编辑源代码]

单位	基准参考	示例
em	父元素字体大小	`font-size: 1.2em;`
rem	根元素(<html>)字体大小	`font-size: 1.5rem;`
%	父元素字体大小的百分比	`font-size: 120%;`
vw/vh	视窗宽度/高度的1%	`font-size: 5vw;`

关键字值[编辑 | 编辑源代码]

CSS预定义了7个绝对大小关键字：

xx-small
x-small
small
medium（默认值）
large
x-large
xx-large

以及2个相对关键字：

larger（相对于父级增大）
smaller（相对于父级减小）

示例：

h1 { font-size: x-large; }
.small-text { font-size: smaller; }

数学计算[编辑 | 编辑源代码]

使用calc()函数可以创建动态尺寸：

.responsive-text {
    font-size: calc(1rem + 1vw);
}

计算公式： $最终大小 = 基础大小 + (视窗宽度 \times 比例系数)$

继承特性[编辑 | 编辑源代码]

字体大小具有继承性，子元素会继承父元素的字体大小，除非显式覆盖：

<div style="font-size: 20px;">
    父级文本
    <p style="font-size: 0.8em;">子级文本（16px）</p>
</div>

输出效果：

   父级文本

子级文本（16px）

响应式设计实践[编辑 | 编辑源代码]

推荐使用相对单位组合实现响应式排版：

:root {
    font-size: 16px; /* 基准值 */
}

@media (min-width: 768px) {
    :root {
        font-size: 18px;
    }
}

h1 {
    font-size: clamp(1.5rem, 5vw, 3rem); /* 最小值-理想值-最大值 */
}

浏览器渲染差异[编辑 | 编辑源代码]

不同浏览器对字体大小的处理存在细微差异：

Chrome/Safari：严格遵循CSS规范
Firefox：对小数像素值进行亚像素渲染
IE：对em单位的计算有历史遗留问题

性能考虑[编辑 | 编辑源代码]

避免频繁改变字体大小（导致重排）
优先使用rem而非em（计算效率更高）
限制vw单位的使用范围（影响渲染性能）

最佳实践[编辑 | 编辑源代码]

1. 在:root设置基准字体大小 2. 主要内容使用rem单位 3. 局部微调使用em单位 4. 媒体查询中调整基准大小 5. 使用clamp()函数确保可读性

示例系统：

:root {
    --text-base: 1rem;
    --text-sm: calc(var(--text-base) * 0.875);
    --text-lg: calc(var(--text-base) * 1.25);
}

常见问题[编辑 | 编辑源代码]

Q：为什么我的12px字体在某些设备上显示不一致？ A：部分移动设备会强制放大过小的文本，建议使用至少16px作为基础尺寸。

Q：rem和em如何选择？ A：rem适合全局尺寸控制，em适合组件内部相对调整。

扩展阅读[编辑 | 编辑源代码]

WCAG 2.1建议：主要文本不小于16px（1em）
排版黄金比例：理想行高=1.618×字体大小
视距公式： $最小字体 = \frac{视距（cm）}{100}$ （单位：cm）