在网页样式开发中，通过CSS修改字体大小是最基础的操作之一，开发者可以根据不同的页面需求选择合适的属性值和单位来调整文字的显示尺寸。
CSS修改字体大小的核心属性
CSS中专门用于控制字体大小的属性是font-size，我们只需要给对应的元素设置该属性，就可以调整其内部的文字尺寸。该属性可以作用于几乎所有包含文本内容的HTML元素，比如<p>、<div>、<span>、<h1>到<h6>等标题元素。
常用的字体大小单位及使用示例
1. 固定单位
固定单位指的是尺寸不会随父元素或根元素的变化而自动调整，常用的固定单位有px（像素）、pt（点）、cm（厘米）等，其中px是最常用的固定单位。
使用px设置字体大小的示例代码如下：
/* 给段落元素设置14像素的字体大小 */
p {
font-size: 14px;
}
/* 给一级标题设置32像素的字体大小 */
h1 {
font-size: 32px;
}
2. 相对单位
相对单位的尺寸会基于某个参考值进行计算，常用的相对单位有em、rem、%、vw、vh等，这类单位更适合做响应式布局。
- em：相对于当前元素的父元素的字体大小，如果当前元素没有设置字体大小，会一直向上查找继承的值。
- rem：相对于根元素（html元素）的字体大小，默认情况下根元素字体大小为16px。
- %：相对于父元素的字体大小的百分比。
相对单位的使用示例代码如下：
/* 设置根元素字体大小为16px，后续rem会基于这个值计算 */
html {
font-size: 16px;
}
/* 子元素字体大小为父元素的1.2倍 */
.child {
font-size: 1.2em;
}
/* 元素字体大小为根元素字体大小的1.5倍，即16*1.5=24px */
.rem-demo {
font-size: 1.5rem;
}
/* 元素字体大小为父元素字体大小的120% */
.percent-demo {
font-size: 120%;
}
通过内联样式修改字体大小
除了在CSS样式表中设置，也可以直接在HTML元素上使用内联样式修改字体大小，不过这种方式优先级较高，不利于样式复用，通常只适合临时调整单个元素的样式。
内联样式修改字体大小的示例代码如下：
<p style="font-size: 16px;">这是一段通过内联样式设置字体大小的文字</p> <span style="font-size: 1.2rem;">这是一段用rem单位设置字体大小的文字</span>
字体大小设置的优先级规则
当同一个元素被多个规则设置了font-size时，会按照CSS优先级规则生效：
- 内联样式的优先级高于内部样式表和外部样式表。
- 相同优先级下，后定义的样式会覆盖先定义的样式。
- 带有
!important标记的样式优先级最高，不过不建议随意使用，会破坏样式优先级逻辑。
优先级示例代码如下：
/* 外部样式表设置的字体大小 */
p {
font-size: 14px;
}
/* 内部样式表后定义，会覆盖外部样式表的设置 */
p {
font-size: 16px;
}
不同单位的适用场景
| 单位类型 | 适用场景 |
|---|---|
| px | 需要固定尺寸、不需要响应式的静态页面元素，比如固定的图标文字、固定尺寸的按钮文字 |
| rem | 响应式布局，需要整体调整页面字体大小的场景，比如移动端适配、用户自定义字体大小功能 |
| em | 组件内部的相对尺寸调整，比如按钮内部的图标和文字尺寸比例调整 |
| vw/vh | 需要根据视口尺寸动态调整字体大小的场景，比如全屏展示的大标题 |
注意事项
- 不要给所有元素都设置固定的px字体大小，会导致响应式布局适配困难。
- 使用em单位时要注意父元素的字体大小继承关系，避免出现尺寸计算不符合预期的问题。
- 最小字体大小不要小于12px，过小的字体在移动端设备上会影响可读性。