做前端开发时经常会遇到一个奇怪的现象：明明css里写死了字号，页面上某些文字还是会莫名变大或变小，尤其是移动端浏览器、微信内置浏览器或者用户按住Ctrl滚轮缩放之后，整个排版就乱了。想让css字体大小固定下来，其实不只是简单地写一个px值那么简单，需要理解浏览器对字号的处理机制，再结合合适的单位与属性才能真正锁住字号。本文从单位选择、浏览器行为、代码实战几个层面，把固定字体大小这件事讲透。
一、用px单位直接固定字号是最直接的方式
固定字体大小最基础的做法就是使用绝对单位px。px代表屏幕上的物理像素点（在标准缩放比例下），它不受父元素字号影响，写多少就是多少，是最可控的方案。
body {
font-size: 16px;
}
.title {
font-size: 24px;
}
.content p {
font-size: 14px;
}
px的优点是所见即所得，不同浏览器之间渲染差异极小，团队协作时也方便统一规范。缺点是缺乏弹性，当用户希望放大文字（比如视力不好的用户）时，如果整个页面都用px，用户通过浏览器设置调大字号的功能会失效。所以px适合用在标题、按钮、图标文字这类需要精确排版的元素上，正文内容可以酌情配合相对单位使用。
还有一个细节要注意：如果在html元素上设置固定的px字号，比如html { font-size: 16px; }，那么所有基于rem的字号都会以这个值为基准计算，这相当于间接锁定了全站字号的比例关系，是固定字号体系的常用基础写法。
二、理解em和rem的区别，避免字号被意外放大
很多字号“固定不住”的问题，根源出在em单位上。em是相对单位，它参照的是父元素的字号。一旦元素嵌套，字号就会层层累积，出现越嵌套越大的情况。
.parent {
font-size: 14px;
}
/* 子元素字号 = 14 * 1.2 = 16.8px */
.child {
font-size: 1.2em;
}
/* 孙元素字号 = 16.8 * 1.2 = 20.16px，越叠越大 */
.grandchild {
font-size: 1.2em;
}
上面这段代码里，孙元素的字号并不是预期的16.8px，而是20.16px，这就是em嵌套导致的失控。rem就是为了解决这个问题而设计的，它只参照根元素html的字号，不管嵌套多少层，计算基准都是同一个值，字号因此变得稳定可预测。
html {
font-size: 16px;
}
/* 1.5rem = 16 * 1.5 = 24px，任何层级下都一样 */
.title {
font-size: 1.5rem;
}
.content {
font-size: 0.875rem; /* 14px */
}
如果想固定全站字号，可以在html上写死一个px基准值，然后所有元素统一用rem。这样即使后期要整体调整，也只需要改一个数字，同时字号的相对关系完全锁死，不会出现意外缩放。如果确实需要用em，建议只在单层元素内使用，避免嵌套场景。
三、处理浏览器行为导致的字号变化
有些时候字号固定不住，并不是css写得不对，而是浏览器的默认行为在作怪。最典型的是移动端浏览器的文字自动放大功能：当页面没有设置viewport，或者横屏之后，iOS的Safari会自动把文字调大，这会让字号看起来完全失控。
解决办法是在页面头部声明viewport，并且加上text-size-adjust属性禁用自动调整。
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
html {
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
}
把值设为100%表示禁用浏览器的自动文字放大，同时不影响用户主动缩放页面的能力。注意不要设为none，虽然也能阻止自动调整，但在部分浏览器中会连用户的缩放操作一起屏蔽，影响可访问性。
另外还有一个容易被忽视的限制：Chrome等浏览器设置了最小字号（默认约12px，可在浏览器设置中修改）。如果你写的字号小于最小字号，比如font-size: 10px;，实际渲染出来会是12px，看起来就像字号“不听话”。解决办法有两种：一是字号不小于12px；二是改用transform: scale()缩小文字，transform不受最小字号限制。
.small-text {
font-size: 12px;
transform: scale(0.833); /* 相当于10px的视觉效果 */
transform-origin: left center;
}
四、固定字号与可访问性之间要取得平衡
最后必须强调一点：把字号锁得太死，可能会伤害一部分用户。老年用户、视力障碍用户往往依赖浏览器的大字号模式来阅读内容。如果全站都用px并且禁用了text-size-adjust，用户就失去了调节文字大小的能力，这在可访问性层面是不推荐的做法。
比较稳妥的实践是：交互控件、logo、图标文字等装饰性内容用px固定，保证布局不乱；正文段落用rem，让用户通过浏览器设置调整根字号时，正文能跟着变大。同时不要用JavaScript去强制还原用户设置的字号，也不要用!important去覆盖用户样式表。
总结一下固定css字体大小的完整思路：html上设定固定px基准，正文用rem保持比例稳定，装饰元素用px精确控制，加上viewport声明和text-size-adjust阻止浏览器自动放大，字号小于12px时改用transform。这一套组合拳下来，页面文字在各个设备和浏览器中的大小就基本可控了。