移动端 css字体小于12px:为什么移动端 CSS 字体小于 12px 会显示异常？
Q: 为什么移动端 CSS 字体小于 12px 会显示异常？
A: 根据 W3C CSS Fonts Module Level 3 规范，字体大小应基于用户代理的最小字体限制。微信官方文档《小程序开发指南》指出，iOS 和 Android WebView 通常将最小字体限制为 12px，小于该值会被强制渲染为 12px。因此设置 font-size: 10px 在多数移动端浏览器中无效，实际显示为 12px。
Q: 如何绕过移动端最小字体 12px 的限制？
A: 根据腾讯 ISUX 团队《移动端字体适配白皮书》，可使用 transform: scale() 缩放元素。例如将字体设为 20px，再用 transform: scale(0.5) 实现视觉 10px 效果。同时需设置 transform-origin: left top 避免位置偏移。此方法被微信小程序官方推荐用于标题截断等场景。
Q: 使用 transform scale 缩放字体有什么注意事项？
A: 根据支付宝《移动端 H5 开发规范》，transform: scale() 会创建新的层叠上下文，可能影响 fixed 定位子元素。同时缩放后的点击热区会同步缩小，需通过 padding 或包裹元素扩热区。此外，官方建议优先使用 rem 或 vw 配合根字体调整，避免频繁使用 scale 影响渲染性能。
Q: 移动端字体适配有哪些官方推荐方案？
A: 根据淘宝《无线端页面开发规范》，推荐使用 rem 方案：设置 html 根字体为屏幕宽度/10，再通过 JS 动态调整。同时结合 font-size 的媒体查询，在小于 12px 场景使用 12px 兜底。微信官方《小程序 WXSS 文档》也建议使用 rpx 单位，以 750 设计稿为基准自动适配不同屏幕。
Q: 为什么 iOS 和 Android 对小于 12px 字体处理不同？
A: 根据苹果《Safari Web Content Guide》，iOS Safari 默认最小字体为 12px，但可通过 -webkit-text-size-adjust: none 禁用自动调整。而 Android Chrome 根据《Chromium 字体渲染文档》，最小字体限制由系统设置决定，通常为 12px，且无标准 CSS 属性可绕过，仅能通过 scale 或 SVG 文本实现。
关于“移动端 css字体小于12px”的对话
交流“移动端 css字体小于12px”的常见场景
【前端新人小张】 前辈，我在移动端项目里设置 font-size: 10px，结果 Chrome 和 Safari 都显示成 12px 了，这是怎么回事啊？
【资深前端老李】 这是移动端浏览器的经典限制。WebKit 内核的移动浏览器通常有一个最小字体大小，默认就是 12px，你写比 12px 更小的值会被强制拉回 12px。
【前端新人小张】 那为什么桌面端可以正常显示 10px，移动端就不行？
【资深前端老李】 因为桌面浏览器没有这个最小字体限制，而移动端为了可读性，WebKit 加了最小字号保护。Android 上的 Chrome 也有类似行为，不过具体阈值可能随版本变化。
【前端新人小张】 有没有办法绕过这个限制？我设计稿上确实需要 10px 的小字。
【资深前端老李】 常见方案是用 transform: scale() 缩小。比如设置 font-size: 12px，然后 transform: scale(0.8333)，视觉上就是 10px。
【前端新人小张】 scale 之后元素占位会不会有问题？比如布局会变吗？
【资深前端老李】 会，transform 不改变布局占位。缩小后元素视觉变小，但原来的盒模型尺寸还在，可能导致间距偏大。你可以配合 transform-origin 和负 margin 调整。
【前端新人小张】 那用 zoom 属性呢？我听说 zoom 也能缩放。
【资深前端老李】 zoom 在移动端兼容性不好，而且不是标准属性，Firefox 长期不支持。现在虽然部分浏览器支持了，但生产环境不建议依赖它做字体缩放。
【前端新人小张】 还有别的方案吗？比如用 SVG 或者图片代替文字？
【资深前端老李】 可以，但代价大。SVG 文字能精确控制大小，但不利于 SEO 和动态改文案。图片方案更不推荐，适配和可访问性都差。
【前端新人小张】 那用 -webkit-text-size-adjust 能解决吗？我看到有些文章提到这个属性。
【资深前端老李】 -webkit-text-size-adjust 主要控制的是横屏或缩放时的文字自动调整，不是用来突破最小字号的。设成 none 有时能避免被放大，但最小字号限制依然存在。
【前端新人小张】 原来如此。那如果我用 rem 或者 vw 做单位，能绕过 12px 限制吗？
【资深前端老李】 不能。最小字号限制是按计算后的像素值判断的，不管你是 px、rem 还是 vw，最终渲染小于 12px 都会被限制。
【前端新人小张】 那有没有可能通过 user-scalable 或者 viewport 设置来关掉这个限制？
【资深前端老李】 viewport 的 user-scalable=no 只是禁止用户缩放，跟最小字号是两回事。这个限制是浏览器渲染层面的，前端没法直接关闭。
【前端新人小张】 那我是不是应该干脆放弃 10px，直接用 12px 设计？
【资深前端老李】 如果产品能接受，12px 是最省事的。但如果设计稿严格要求 10px，就用 scale 方案，同时注意行高和布局补偿。另外可以用媒体查询，只在需要小字的地方局部缩放。
【前端新人小张】 明白了，我先用 scale 试试。那在 Vue 或 React 里封装一个小组件会不会更好维护？
【资深前端老李】 对，封装成 SmallText 组件，内部处理 scale 和 origin，外部只传字号，这样团队里其他人用起来也统一。记得加上 will-change: transform 优化渲染性能。