内联style设置font-size最快，适合临时调整；CSS类更利于维护复用；全局字号推荐html{font-size}或body{font-size:100%}；响应式优先用rem+media query或clamp()。

用 style 内联设置字体大小最直接

页面里某一段文字要临时调大或调小，style 是最快路径。它绕过 CSS 文件加载和选择器优先级干扰，适合调试或快速改版。

• font-size 值支持多种单位：px（像素，固定）、em（相对父元素）、rem（相对根元素）、%（百分比）
• 比如：<p style="font-size: 18px;">这段字是18像素</p>
• 注意：em 容易嵌套放大——如果父元素是 16px，子元素写 1.5em 就是 24px；再套一层又乘一次，容易失控

CSS 类控制字体大小更利于维护

多个地方要用相同字号？别重复写 style，抽成 class 更安全、可复用。

• 在 <head> 里加 <style> 或外链 CSS 文件，定义如：

  .text-sm { font-size: 14px; }<br>.text-lg { font-size: 20px; }

• HTML 中使用：<span class="text-lg">大号文字</span>
• 关键点：class 名别用语义模糊的（如 big），优先用功能或场景描述（label-text、card-title），否则换设计时得全盘搜改

全局默认字体大小靠 html 或 body 设置

想统一整站基础字号，不是每个标签都去设，而是从根上调整基准。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 设 html { font-size: 16px; } 是常见做法，这样 1rem = 16px，后续所有 rem 单位都以此为锚点
• 也可以设 body { font-size: 100%; } —— 这会继承浏览器默认（通常也是 16px），但更稳妥，避免某些旧浏览器解析差异
• 别在 body 直接设 px 值然后让子元素用 em，容易和用户系统缩放冲突（比如 Windows 的“放大文本”设置）

font-size 遇到响应式要慎用固定值

手机上看 16px 文字可能太小，桌面看 20px 标题又太大，纯固定值扛不住多端适配。

立即学习“前端免费学习笔记（深入）”；

• 推荐组合：rem + media query 或 clamp()
• 例如：font-size: clamp(14px, 2.5vw, 18px); —— 最小 14px，最大 18px，中间随视口宽度线性变化
• 注意：clamp() 在 IE 完全不支持，Safari 13.4+ 才稳定，上线前得查目标用户浏览器占比
• 别用 vh/vw 单独撑标题，滚动时字号会跟着视口变，阅读体验割裂

实际改字体大小时，最常被忽略的是用户系统设置和可访问性需求——比如强制放大字体后，px 值文字可能被截断，而 rem 和 em 能更好响应。动手前先问一句：这个尺寸是“设计稿要求”，还是“真实阅读需要”？