在网页开发中，字体大小的调节是样式设置的基础操作，既可以通过HTML的原生属性实现，也能借助CSS的多样化样式规则完成，不同方式各有适用场景，开发者可以根据实际需求选择。
HTML原生调节字体大小的方法
早期HTML提供了<font>标签用于设置字体相关样式，其中size属性可以调节字体大小，该属性的取值范围是1到7，默认值为3，数值越大字体越大。
<!-- 使用font标签的size属性调节字体大小 --> <font size="1">一号字体</font> <font size="3">默认大小字体</font> <font size="7">七号字体</font>
不过需要注意的是，<font>标签已经在HTML5中被废弃，不再推荐在新项目中使用，后续开发建议优先使用CSS的方式调节字体尺寸。
CSS调节字体大小的核心方式
使用font-size属性
CSS中通过font-size属性调节字体大小，支持多种单位，开发者可以根据场景选择合适的单位类型。
绝对单位
绝对单位是固定的尺寸，不会随父元素或视口变化而改变，常见的绝对单位有px、pt、cm等，其中px是最常用的像素单位。
/* 使用px绝对单位设置字体大小 */
.text-px {
font-size: 16px;
}
/* 使用pt绝对单位设置字体大小，1pt等于1/72英寸 */
.text-pt {
font-size: 12pt;
}
相对单位
相对单位是相对于某个参考值计算的尺寸，适配性更好，常见的相对单位有em、rem、%、vw等。
- em：相对于当前元素的父元素的字体大小，如果当前元素没有设置字体大小，会一直向上查找直到根元素
- rem：相对于根元素（html标签）的字体大小，根元素默认字体大小是16px
- %：相对于父元素的字体大小的百分比
- vw：相对于视口宽度的百分比，1vw等于视口宽度的1%
/* 使用相对单位设置字体大小 */
.text-em {
font-size: 1.5em; /* 是父元素字体大小的1.5倍 */
}
.text-rem {
font-size: 1rem; /* 根元素默认16px，这里就是16px */
}
.text-percent {
font-size: 120%; /* 是父元素字体大小的120% */
}
.text-vw {
font-size: 2vw; /* 视口宽度每100px，字体大小就是2px */
}
不同CSS引入方式的字体设置
CSS可以通过内联样式、内部样式表、外部样式表三种方式引入，对应的字体大小设置方式如下。
内联样式
直接在HTML标签的style属性中写font-size规则，优先级最高，只作用于当前标签。
<p style="font-size: 18px;">这段段落的字体大小是18像素</p>
内部样式表
在HTML的<head>标签内通过<style>标签定义样式规则，作用于当前整个页面。
<head>
<style>
.inner-style-text {
font-size: 14px;
}
/* 也可以直接通过标签选择器设置 */
h3 {
font-size: 20px;
}
</style>
</head>
<body>
<p class="inner-style-text">使用内部样式表设置的字体</p>
</body>
外部样式表
将CSS规则写在独立的.css文件中，通过<link>标签引入到HTML页面，可作用于多个页面，是项目开发中最推荐的方式。
/* style.css文件内容 */
.external-style-text {
font-size: 1.2rem;
}
<!-- HTML页面引入外部样式表 -->
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p class="external-style-text">使用外部样式表设置的字体</p>
</body>
字体大小调节的实用技巧
在实际开发中，推荐优先使用rem作为字体单位，同时给根元素设置基础的字体大小，方便整体调整页面字体尺寸。
/* 根元素设置基础字体大小，方便后续用rem计算 */
html {
font-size: 16px;
}
/* 标题使用rem单位，适配不同场景 */
h1 {
font-size: 2rem; /* 32px */
}
h2 {
font-size: 1.5rem; /* 24px */
}
p {
font-size: 1rem; /* 16px */
}
如果需要实现响应式字体，让字体随视口大小自动调整，可以结合vw单位和calc()函数实现。
/* 响应式字体，最小14px，最大20px，随视口宽度变化 */
.responsive-text {
font-size: calc(14px + (20 - 14) * ((100vw - 320px) / (1200 - 320)));
}
另外需要注意，不要给字体大小设置过小的数值，一般正文内容字体大小建议不小于14px，保证用户的阅读体验。