用 font-size 设置文字大小最直接有效
html 本身没有独立的“文字大小标签”， 已被废弃，所有现代场景都靠 css 的 font-size 控制。它支持多种单位，不同单位适用不同场景，选错容易导致响应式失效或缩放异常。
-
px：固定像素，适合精确控制图标旁文字、按钮内文案等不需缩放的局部元素 -
em：相对父元素字体大小，嵌套深时容易叠加放大（比如父级1.2em，子级再设1.2em就变成 1.44 倍） -
rem：相对根元素（html）字体大小，推荐用于全局响应式——只需改一句html { font-size: 16px; }就能批量缩放 -
%：相对父元素百分比，行为和em类似，但可读性略差
行内样式快速调试用 style="font-size: ..."
临时改单个文字大小，不用写 CSS 文件，直接加 style 属性最快。注意引号必须成对，单位不能省略（font-size: 14 无效，必须是 font-size: 14px 或 font-size: 1.1rem）。
这段字会变大
这个 span 比根字号小 10%缺点是无法复用、难维护，上线前建议抽到外部 CSS 或 CSS-in-js 中。
用 vw 或 clamp() 实现文字随屏幕自适应
纯 rem 还得配合媒体查询做断点，更灵活的方式是用视口单位或函数：
立即学习“前端免费学习笔记（深入）”；
-
font-size: 4vw：文字宽度占视口宽的 4%，小屏下可能过小，大屏下可能过大 -
font-size: clamp(14px, 2.5vw, 20px)：最小 14px、理想值 2.5vw、最大 20px，兼顾可读性与弹性，chrome 85+ 支持 - 老浏览器不支持
clamp()时，需用@supports回退或 JS 补丁
移动端文字太小？检查 viewport meta 和系统缩放
即使写了 font-size: 16px，ios safari 可能自动放大文本（尤其
或
内纯文字块），表现为点击后突然变大。常见原因和解法：
- 漏写
—— 必须加，否则移动端按桌面宽度渲染 - 系统设置里开启了“更大字体”或“辅助功能缩放”——前端无法绕过，但可用
text-size-adjust: 100%禁用浏览器自动放大（注意 iOS Safari 仅支持none或100%） -
font-size小于 16px 且无其他内容包裹时，部分 android 浏览器会强制提升，建议最小设为14px并搭配line-height避免挤在一起
真正麻烦的不是调大，而是调得刚好——既要适配各种屏幕，又要尊重用户系统设置，还得考虑可访问性。别只盯着 font-size 值，多看真实设备上的渲染效果。