编辑“︁CSS字体大小”︁（章节）

= CSS字体大小 =

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

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

<syntaxhighlight lang="css">
selector {
    font-size: value;
}
</syntaxhighlight>

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

=== 绝对单位 ===
{| class="wikitable"
|-
! 单位 !! 描述 !! 示例
|-
| px || 像素（1/96英寸） || <code>font-size: 16px;</code>
|-
| pt || 点（1/72英寸） || <code>font-size: 12pt;</code>
|-
| cm/mm/in || 物理尺寸单位 || <code>font-size: 0.5cm;</code>
|}

=== 相对单位 ===
{| class="wikitable"
|-
! 单位 !! 基准参考 !! 示例
|-
| em || 父元素字体大小 || <code>font-size: 1.2em;</code>
|-
| rem || 根元素(<html>)字体大小 || <code>font-size: 1.5rem;</code>
|-
| % || 父元素字体大小的百分比 || <code>font-size: 120%;</code>
|-
| vw/vh || 视窗宽度/高度的1% || <code>font-size: 5vw;</code>
|}

<mermaid>
pie
    title 单位使用频率统计
    "px" : 45
    "rem" : 30
    "em" : 15
    "其他" : 10
</mermaid>

== 关键字值 ==
CSS预定义了7个绝对大小关键字：
* xx-small
* x-small
* small
* medium（默认值）
* large
* x-large
* xx-large

以及2个相对关键字：
* larger（相对于父级增大）
* smaller（相对于父级减小）

示例：
<syntaxhighlight lang="css">
h1 { font-size: x-large; }
.small-text { font-size: smaller; }
</syntaxhighlight>

== 数学计算 ==
使用<code>calc()</code>函数可以创建动态尺寸：
<syntaxhighlight lang="css">
.responsive-text {
    font-size: calc(1rem + 1vw);
}
</syntaxhighlight>

计算公式：<math>\text{最终大小} = \text{基础大小} + (\text{视窗宽度} \times \text{比例系数})</math>

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

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

输出效果：
<div style="font-size: 20px; border:1px dashed #aaa; padding:10px;">
    父级文本
    <p style="font-size: 0.8em; margin:5px 0 0 0;">子级文本（16px）</p>
</div>

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

<syntaxhighlight lang="css">
:root {
    font-size: 16px; /* 基准值 */
}

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

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

== 浏览器渲染差异 ==
不同浏览器对字体大小的处理存在细微差异：
* Chrome/Safari：严格遵循CSS规范
* Firefox：对小数像素值进行亚像素渲染
* IE：对em单位的计算有历史遗留问题

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

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

示例系统：
<syntaxhighlight lang="css">
:root {
    --text-base: 1rem;
    --text-sm: calc(var(--text-base) * 0.875);
    --text-lg: calc(var(--text-base) * 1.25);
}
</syntaxhighlight>

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

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

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

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS文本与字体]]