在html开发中，调整文字大小是最基础的操作之一，不同的调整方式和单位会带来完全不同的显示效果，新手如果对这些内容不熟悉，很容易出现设置无效或者适配异常的问题。
一、html调整文字大小的常用方法
1. 使用行内样式调整
直接在html标签的style属性中设置font-size属性，这种方式优先级最高，只对当前标签生效。
<p style="font-size: 16px;">这是一段16像素大小的文字</p> <div style="font-size: 1.2rem;">这是一段1.2rem大小的文字</div>
2. 使用内部样式表调整
在html的<style>标签中定义样式规则，可以批量控制多个元素的文字大小。
<style>
/* 所有p标签的文字大小设为14px */
p {
font-size: 14px;
}
/* 类名为title的元素文字大小设为24px */
.title {
font-size: 24px;
}
</style>
3. 使用外部样式表调整
将样式规则写在独立的css文件中，通过<link>标签引入，适合多页面项目的统一样式管理。
<!-- 在html中引入外部css文件 --> <link rel="stylesheet" href="style.css">
/* style.css文件内容 */
body {
font-size: 16px;
}
h1 {
font-size: 2em;
}
二、常用文字大小单位说明
不同的单位对应不同的计算逻辑，适用场景也有区别，下面是常见的单位对比：
| 单位 | 说明 | 适用场景 |
|---|---|---|
| px | 像素单位，是固定的绝对单位，1px对应屏幕的一个像素点 | 固定尺寸的元素、不需要响应式适配的文字 |
| em | 相对单位，相对于当前元素的父元素的font-size值计算 | 局部相对缩放的文字内容 |
| rem | 相对单位，相对于根元素<html>的font-size值计算 | 响应式布局、全局统一的文字缩放 |
| % | 相对单位，相对于父元素的font-size值的百分比 | 需要按比例缩放的文字 |
| vw/vh | 相对单位，相对于视口宽度/高度的百分比，1vw等于视口宽度的1% | 需要根据视口大小自动调整的文字 |
三、新手常犯的单位选错问题汇总
1. 误用px做全局响应式文字
很多新手习惯用px设置所有文字大小，在固定宽度的页面中没问题，但在移动端或者不同分辨率的设备上，文字会显得过大或者过小，无法实现自适应。
错误示例：
/* 错误写法，所有设备文字都是16px，无法适配 */
body {
font-size: 16px;
}
正确写法：
/* 根元素设置基准值，其他元素用rem相对计算 */
html {
font-size: 16px;
}
body {
font-size: 1rem; /* 相当于16px */
}
h1 {
font-size: 2rem; /* 相当于32px，根元素字体变化时自动缩放 */
}
2. 混淆em和rem的计算基准
em是相对于父元素的font-size，如果父元素本身设置了em单位，会出现多层嵌套后计算错误的问题，新手经常误以为em和rem一样是相对于根元素的。
错误示例：
<div style="font-size: 1.2em;">
<p style="font-size: 1.2em;">这段文字的大小是1.2*1.2=1.44em，不是预期的1.2em</p>
</div>
如果希望统一基准，应该改用rem单位。
3. 使用不存在的单位或者错误拼写
部分新手会拼写错误单位，比如把rem写成remm，或者自定义不存在的单位，导致样式失效，文字使用默认大小。
错误示例：
.text {
font-size: 16pxx; /* 单位拼写错误，样式无效 */
}
4. 用百分比单位时忽略父元素基准
百分比单位是相对于父元素的font-size计算的，如果父元素没有设置font-size，会一直向上查找，直到根元素，新手经常忽略这个基准导致计算错误。
错误示例：
<div>
<!-- 父元素没有设置font-size，默认继承根元素的16px，这里文字大小是16*120%=19.2px -->
<p style="font-size: 120%;">这段文字大小是19.2px</p>
</div>
5. 滥用vw/vh单位导致文字过大或过小
vw/vh是相对于视口的单位，在视口很小（比如小屏手机）或者很大（比如超宽显示器）时，文字会极端缩放，不适合作为常规文字的单位。
错误示例：
/* 小屏手机上文字会非常小，大屏上会非常大 */
body {
font-size: 2vw;
}
四、调整文字大小的注意事项
- 优先使用rem作为全局文字单位，方便响应式适配，基准值可以设置在html根元素上
- 局部需要相对父元素缩放的文字可以使用em单位，避免多层嵌套使用em
- 固定尺寸的小元素（比如图标旁的辅助文字）可以使用px单位，避免缩放导致模糊
- 修改文字大小后要在不同尺寸的设备上测试显示效果，确保适配正常
- 不要给
font-size设置负数或者过大的数值，避免出现显示异常