用 font-size 设置文字大小最直接有效
HTML 本身没有独立的“文字大小标签”，<font size="..."></font> 已被废弃，所有现代场景都靠 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）。
<p style="font-size: 18px;">这段字会变大</p> <span style="font-size: 0.9rem;">这个 span 比根字号小 10%</span>
缺点是无法复用、难维护，上线前建议抽到外部 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 可能自动放大文本（尤其 <p></p> 或 <div> 内纯文字块），表现为点击后突然变大。常见原因和解法：
<ul>
<li>漏写 <code><meta name="viewport" content="width=device-width, initial-scale=1"> —— 必须加，否则移动端按桌面宽度渲染
text-size-adjust: 100% 禁用浏览器自动放大（注意 iOS Safari 仅支持 none 或 100%）font-size 小于 16px 且无其他内容包裹时，部分 Android 浏览器会强制提升，建议最小设为 14px 并搭配 line-height 避免挤在一起真正麻烦的不是调大，而是调得刚好——既要适配各种屏幕，又要尊重用户系统设置，还得考虑可访问性。别只盯着 font-size 值，多看真实设备上的渲染效果。
