统一字体显示需系统性处理：重置默认样式、设根字号、禁用缩放干扰；用rem+无单位line-height；限制字体栈并优选Web Font；辅以clamp()响应式调节及数字等宽设置。
字体在不同浏览器中显示大小不一致，通常不是浏览器“渲染错误”，而是因为默认样式、字体度量（font metrics）、系统字体回退（fallback）以及 font-size 和 line-height 的计算方式差异共同导致的。想真正统一排版，不能只调一个值，得系统性处理。
重置默认字体相关样式
各浏览器对 body、h1～h6、p 等元素有不同默认 font-size 和 line-height，尤其在 Windows 和 macOS 上，相同 CSS 可能因系统字体引擎（如 ClearType vs Core Text）呈现不同视觉高度。
- 用
normalize.css或轻量重置（如* { margin: 0; padding: 0; }）消除基础偏差 - 显式设置根字号：
html { font-size: 16px; }，避免某些浏览器（如旧版 Safari）按百分比缩放时失准 - 禁用用户代理的字体缩放干扰：
body { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; }
用相对单位 + 显式 line-height 统一基线
em、rem 比 px 更可控，但关键在于 line-height 必须用无单位数值（如 1.5），而非 px 或 em——否则会层层继承放大，跨浏览器计算更易出错。
- 推荐写法：
font-size: 1rem; line-height: 1.5;→ 行高 = 字号 × 1.5，不随父级变化 - 避免：
line-height: 24px;（绝对值在小字号下挤，大字号下空）或line-height: 1.5em;（em 会继承计算，可能嵌套失真） - 对标题等强调元素，用
line-height: 1.2;配合稍大font-size，视觉更紧凑且跨平台稳定
限制字体栈，避开系统差异陷阱
比如 "Helvetica Neue", Arial, sans-serif 在 Windows 上根本不用 Helvetica，会回退到 Arial；而 macOS 的 San Francisco 字体字宽、x-height 都和 Windows 的 Segoe UI 不同，直接导致同样 16px 看起来“一大一小”。
立即学习“前端免费学习笔记（深入）”；
- 优先选泛用性强的字体组合，例如：
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; - 如需高度一致，可引入 Web Font（如 Inter、Roboto）并设置
font-display: swap;，确保加载期间不闪动或回退失控 - 慎用系统字体别名如
system-ui，虽现代支持好，但在老版 Edge 或 Android WebView 中表现不稳定
用 CSS 自定义属性 + clamp() 做响应式微调（进阶）
纯固定字号难适配所有设备和视力需求。可用 clamp() 在最小/最大值间平滑过渡，再配合 font-size 和 line-height 联动控制：
- 示例：
font-size: clamp(1rem, 4vw, 1.25rem); line-height: clamp(1.4, 2.5vw, 1.6); - 搭配
@supports (font-size: clamp(...))做渐进增强，不支持的浏览器降级为固定值 - 对关键文案（如按钮文字、表单标签），单独加
font-feature-settings: "tnum";统一数字宽度，减少对齐抖动
基本上就这些。核心是：重置起点、用无单位 line-height、控字体栈、必要时响应式调节。不复杂但容易忽略细节。
