HTML文字大小必须用CSS的font-size属性,禁用废弃的标签;px单位不支持缩放,应优先使用rem或em等相对单位,并通过html{font-size:clamp(14px,1rem,18px)}实现自适应。

HTML 文字大小不能只靠 或盲目用 px,浏览器默认行为、缩放逻辑、可访问性要求都会让错选单位直接导致文字“调了等于没调”。
用 font 标签或 size 属性根本不管用
这是新手最常踩的坑:写 文字,发现完全不生效。因为 是 HTML4 的废弃标签,现代浏览器(包括 Chrome/Firefox/Edge)已不支持 size 属性解析,连控制台都不会报错,只是静默忽略。
- 替代方案只有 CSS:
font-size必须写在style属性里或样式表中 - 别信“教程里还能用”,那是没测试过实际渲染效果
- 如果项目强制用内联样式,正确写法是:
文字
px 看着准,但一放大就露馅
设 font-size: 16px 在 100% 缩放下确实显示为 16 像素,但用户按 Ctrl + 放大页面时,px 单位文字不会随系统字体缩放比例变化——它被钉死在像素格子里,导致可读性崩塌,尤其对视力障碍用户不友好。
- WCAG(无障碍标准)明确要求文字必须支持 200% 缩放且不丢失内容
- 移动端 Safari 对
px字体有强制最小限制(通常不低于 16px),可能被浏览器覆盖 - 更稳妥的选择:
rem(基于根元素html的font-size)、em(相对父级)、或无单位的1.2这类相对值
em 和 rem 不是换汤不换药,嵌套逻辑差很多
新手常以为 “em = 相对父级,rem = 相对根元素”,就随便混用。但真实场景中:em 会逐层累积计算,三层嵌套后 1.2em 可能变成原始大小的 1.728 倍;而 rem 始终只看 html 标签的 font-size,可控性强得多。
立即学习“前端免费学习笔记(深入)”;
- 推荐做法:全局只设一次
html { font-size: 16px; },后续全部用rem,比如font-size: 1.125rem(=18px) - 若需响应式,可配合媒体查询改
html的font-size,所有rem值自动等比缩放 - 慎用
em做文字大小——它更适合控制行高(line-height: 1.5)或内边距这类需要跟随文字变化的属性
浏览器默认字号不是 16px,而是“用户设置”的结果
很多人默认认为 1rem = 16px 是铁律,其实不然。Chrome/Firefox 允许用户在设置里把“标准字体大小”改成 18px、20px 甚至 12px,此时未重置的 html 根字体就会继承该值,1rem 自然跟着变——这正是为什么有些网站在别人电脑上文字小得看不清。
- 解决办法不是“锁死
html { font-size: 16px; }”,而是用clamp()或媒体查询做柔性适配 - 更务实的做法:加一句
html { font-size: clamp(14px, 1rem, 18px); },兼顾最小可读性、默认体验和大屏舒适度 - 千万别用
!important强制覆盖用户设置——这不是“修复”,是拒绝可访问性
真正难的不是“怎么调大”,而是“调大之后,不同设备、不同系统设置、不同缩放级别下,它是否依然清晰可读”。单位选错,调得越用力,问题越隐蔽。










