防止字体变形关键是让CSS像素与设备渲染逻辑对齐，需禁用user-scalable=no、设width=device-width和initial-scale=1.0，用rem+媒体查询稳根字号，统一rem单位，启用clamp()和font-optical-sizing: auto，并避免transform缩放。
视口适配中防止字体变形，关键不是“计算像素比例”，而是**让 CSS 像素与设备渲染逻辑对齐**，避免因缩放、DPR 或 font-size 动态变化导致文字发虚、断层或错位。字体变形通常出现在以下场景：iOS Safari 自动调整字号、Android 浏览器强制最小字体、viewport 缩放被干扰、rem 基准突变、或未处理光学尺寸。
确保 viewport 设置不触发强制缩放
错误的 viewport 会诱使浏览器重排文字流，造成字体“被拉伸”或“被压缩”：
- 禁用 user-scalable=no——它虽防误触，但会阻止 iOS Safari 的自动字体微调机制，反而导致小字号文字被强制放大（如 12px → 16px），破坏设计一致性；
- 必须设 width=device-width 且 initial-scale=1.0，否则浏览器可能以桌面模式渲染，文字按 980px 宽度回流，再缩放到手机屏，造成模糊；
- 避免设置 minimum-scale 或 maximum-scale，尤其在 iOS 上，它们会干扰系统级字体渲染策略。
用 rem + 媒体查询稳住根字号基准
单纯用 js 动态设置 html font-size（如 lib-flexible）易在页面加载初期闪动，或因 DPR 变化导致字体跳变。更稳妥的做法是：
- 以设计稿宽度（如 750px）为基准，用媒体查询分段设定 html font-size，例如：
/* 375px 屏：1rem = 37.5px → html{font-size:234.375%}（基于默认16px）*/ - 所有字体统一用 rem，避免混用 px/em；
- 对 body 或 wrapper 加上 text-rendering: optimizeLegibility，提升字形连字与字距处理精度。
启用现代字体自适应能力
不用手动算比例，靠 CSS 原生能力应对不同视口：
立即学习“前端免费学习笔记（深入）”；
-
clamp()：比如
font-size: clamp(1rem, 2.8vw, 1.3rem);，让字体在小屏保可读、大屏不撑满、中间平滑过渡； - font-optical-sizing: auto：对支持 OpenType 可变字体（如 Inter、SF Pro）的环境，开启光学尺寸自动匹配，小字号用紧凑字形，大字号用舒展字形；
- 避免给 text 元素设
transform: scale()或zoom，这会触发位图缩放，直接导致文字锯齿。
绕过系统字体干预的兜底策略
部分安卓浏览器会无视 font-size，强行把小于 12px 的文字显示为 12px：
- 设计时约定最小字号 ≥ 12px（CSS 值），或用
font-size: 1.25rem配合足够大的根字号； - 对关键标题，加
-webkit-text-size-adjust: 100%，禁用 Safari 的自动字号调整； - 不用 vw 单独驱动字体（如 font-size: 4vw），它在横竖屏切换时易抖动；优先用 clamp() 或 rem + 媒体查询组合。
