在css中设置字体大小主要通过font-size属性实现，该属性支持多种不同的单位，开发者可以根据实际开发需求选择合适的单位来定义文字的尺寸，适配不同的页面布局场景。
一、常用字体大小单位及设置方法
1. 绝对单位px
px是像素单位，属于绝对单位，设置的字体大小不会随父元素或根元素的字体大小变化而改变，适合需要固定文字尺寸的场景，比如按钮文字、导航栏文字等。
/* 设置类名为text-px的元素字体大小为16像素 */
.text-px {
font-size: 16px;
}
2. 相对单位em
em是相对单位，相对于当前元素的父元素的字体大小计算，如果当前元素没有设置字体大小，会一直向上查找父元素的字体大小作为基准，1em等于父元素的字体大小。
/* 父元素字体大小为16px，当前元素字体大小就是16*1.5=24px */
.parent {
font-size: 16px;
}
.child {
font-size: 1.5em;
}
3. 相对单位rem
rem是相对于根元素<html>的字体大小计算的单位，根元素默认字体大小是16px，修改根元素的font-size属性可以统一调整所有使用rem单位的元素字体大小，适合响应式布局。
/* 根元素字体大小为16px，当前元素字体大小为16*2=32px */
.text-rem {
font-size: 2rem;
}
/* 响应式场景下修改根元素字体大小，所有rem单位的元素会同步变化 */
html {
font-size: 14px;
}
4. 视口单位vw/vh
vw是视口宽度的百分比单位，1vw等于视口宽度的1%，vh是视口高度的百分比单位，使用这类单位设置的字体大小会随视口尺寸变化而自动调整，适合需要随屏幕大小动态变化的文字场景。
/* 字体大小随视口宽度变化，视口宽度1000px时，字体大小为10px */
.text-vw {
font-size: 1vw;
}
二、不同单位的适用场景对比
不同字体大小单位的特点不同，适用的开发场景也有区别，具体对比如下：
| 单位类型 | 基准参考 | 适用场景 |
|---|---|---|
| px | 屏幕像素 | 固定尺寸的文字，如按钮、固定导航文字 |
| em | 父元素字体大小 | 组件内部相对父元素的文字尺寸调整 |
| rem | 根元素字体大小 | 响应式布局，需要统一调整全局文字尺寸的场景 |
| vw/vh | 视口宽高 | 需要随屏幕尺寸动态变化的标题、宣传文字 |
三、设置字体大小的注意事项
- 不要给所有元素都设置固定的px单位字体大小，响应式布局中优先使用rem或vw单位，减少不同屏幕尺寸下的适配工作量。
- 使用em单位时要注意父元素的字体大小继承问题，避免出现字体大小计算不符合预期的情况。
- 字体大小设置不要过小，移动端场景下建议最小字体不小于12px，保证文字可读性。
- 如果需要兼容老旧浏览器，要提前确认目标浏览器是否支持对应的字体单位，比如部分低版本浏览器对vw单位的支持不完善。
四、完整示例代码
以下是一个包含多种字体大小设置方式的完整示例，可以直接复制到本地运行查看效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css字体大小设置示例</title>
<style>
/* 根元素字体大小设置 */
html {
font-size: 16px;
}
/* px单位示例 */
.px-text {
font-size: 18px;
margin: 10px 0;
}
/* em单位示例 */
.parent-box {
font-size: 16px;
}
.em-text {
font-size: 1.2em;
margin: 10px 0;
}
/* rem单位示例 */
.rem-text {
font-size: 1.5rem;
margin: 10px 0;
}
/* vw单位示例 */
.vw-text {
font-size: 2vw;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="px-text">这是使用px单位设置的文字，大小固定为18px</div>
<div class="parent-box">
<div class="em-text">这是使用em单位设置的文字，大小为父元素的1.2倍</div>
</div>
<div class="rem-text">这是使用rem单位设置的文字，大小为根元素的1.5倍</div>
<div class="vw-text">这是使用vw单位设置的文字，大小随视口宽度变化</div>
</body>
</html>