在网页制作里，文字大小直接决定阅读体验。很多新手习惯把字体写成固定像素，这种做法在桌面端看起来正常，但到了手机或者用户开启浏览器缩放时就会出问题。HTML文本缩放的本质，是让文字尺寸能够随容器、根元素或用户设置灵活变化，而不是被锁死在某一个数值上。
使用相对单位控制文字比例
最常见的做法是放弃px这种绝对单位，改用em、rem或者百分比来定义字号。其中em相对于当前元素的父级字体大小，如果父级是16px，那么1.5em就是24px。这种写法适合组件内部需要按比例放大的情况，比如卡片标题比正文大百分之五十。
相比之下，rem始终相对于根元素也就是<html>标签的字体大小。只要用户或脚本修改了根字号，全站文字就会同步缩放。下面的代码展示了如何用rem搭建基础排版：
html {
font-size: 16px;
}
body {
font-size: 1rem;
}
h1 {
font-size: 2rem;
}
.sidebar {
font-size: 0.875rem;
}
百分比单位也很直观，font-size: 120%表示比父级大两成。它的行为和em非常接近，但语义上更偏向整体比例调整。需要注意的是，多层嵌套使用em会产生复合放大，例如外层1.2em、内层再1.2em，实际就是原来的百分之一百四十四，容易让文字失控，此时用rem会更可控。
通过viewport与用户缩放设置适配设备
移动端浏览器本身有一套缩放逻辑，核心就是<meta>标签里的viewport声明。如果页面写了width=device-width, initial-scale=1，就等同于告诉浏览器按照设备真实宽度排版，用户双指缩放也不会破坏布局。相反，若设置user-scalable=no或者固定了maximum-scale，会剥夺用户放大文字的权利，在无障碍规范里属于负面做法。
除了标签设置，CSS的calc函数也能结合viewport单位做动态文字。比如font-size: calc(1rem + 0.5vw)，意味着基础字号随屏幕变宽微微增大。下面给出一段兼顾小屏和大屏的示例：
:root {
font-size: calc(14px + 0.3vw);
}
@media (max-width: 480px) {
:root {
font-size: 15px;
}
}
p {
font-size: 1rem;
line-height: 1.6;
}
这种方案的优点是文字比例随视口平滑变化，不会出现断点跳跃。但也要小心vw在超宽显示器上让字变得过大，所以通常要用calc加一个固定底数，或者用媒体查询封顶。从用户体验看，保留用户主动缩放能力比自动适配更重要，两者并不冲突。
避免误用transform进行文本缩放
有些开发者为了快速放大某块内容，会给容器加transform: scale(1.2)。这确实能让文字视觉上变大，但本质是位图级别的拉伸，不是真正的文本重排。屏幕阅读器读到的仍是原始尺寸，搜索引擎也不会认为字变大了，而且放大后容器所占布局空间不变，容易和周围元素重叠。
另一个隐患是transform缩放会影响里面所有的子元素，包括图片和边框，导致整体模糊。正确思路应当是改字体属性而不是变形。以下反例展示了错误方式：
<div style="transform: scale(1.3); transform-origin: left top;"> <p>这段字被拉伸，不是真正缩放</p> </div>
如果确实要整体调比例，更合理的办法是用font-size配合zoom属性，不过zoom并非所有浏览器都支持标准一致。最稳的方案依然是在根元素用rem体系，然后通过脚本或媒体查询调整根值。这样文字清晰、可访问性完好，也不会引发重绘错位。
用脚本响应用户偏好实现手动缩放
当页面需要提供“大字模式”按钮时，可以用JavaScript修改document.documentElement.style.fontSize。因为全站都基于rem，根字号一变，所有文字按比例调整。下面是一段最简实现：
function setTextScale(ratio) {
var base = 16;
document.documentElement.style.fontSize = (base * ratio) + 'px';
}
// 用户点击放大
setTextScale(1.25);
// 用户点击还原
setTextScale(1);
这种操作比改transform可靠得多，也不会破坏语义结构。同时建议把用户选择记到localStorage里，下次访问自动套用。配合prefers-reduced-motion等媒体特性，还能让缩放切换更柔和。总体而言，HTML文本缩放应当走相对单位加根控制这条路，避开视觉欺骗式的变形手段。