网页字体跨设备显示不一致的主因是系统默认字体、DPI、浏览器渲染及回退策略差异；推荐用rem实现主体字号等比缩放（动态设置html font-size），vw配合clamp用于标题响应，需写全字体栈并微调渲染细节。
网页字体在不同设备上显示不一致，核心原因是系统默认字体、DPI（像素密度）、浏览器渲染机制和字体回退策略不同。单纯用 px 固定字号会导致高分屏文字过小、低分屏又偏大。用 rem 或 vw 是主流适配方案，但需理解它们的适用场景和配合方式。
用 rem 实现等比缩放（推荐主体字号）
rem 基于根元素（html）的字体大小，只要动态调整 html 的 font-size，整个页面字体就能等比响应。关键是让根字号随屏幕宽度变化。
- 常见做法：在
中插入一段 JS，根据设备宽度计算并设置document.documentElement.style.fontSize，例如以 375px 设计稿为基准，1rem = 10px → 宽度每增加 1px，rem 值线性增长 - 更稳妥的方式是结合
viewport和媒体查询做断点控制，比如：@media (max-width: 375px) { html { font-size: 10px; } }、@media (min-width: 768px) { html { font-size: 13.333px; } } - 注意：iOS Safari 对小于 12px 的字体有强制放大限制（避免可读性问题），所以用 rem 设置小字号时要测试实际渲染效果，必要时加
-webkit-text-size-adjust: 100%
用 vw 实现视口宽度强关联（适合标题类大字）
vw 表示视口宽度的 1%，比如 font-size: 5vw 在 400px 宽屏幕上是 20px，在 800px 屏上就是 40px。它天然响应屏幕宽度，无需 JS。
- 适合 banner 标题、主视觉文字等需要“随屏拉伸”的场景，但不适合正文——太宽的屏幕会让文字过大，影响阅读体验
- 常用技巧是组合使用：
font-size: clamp(16px, 4.5vw, 28px)，即最小 16px、理想值 4.5vw、最大不超过 28px，兼顾可读性与弹性 - 注意：部分老版本 Android 浏览器对
vw支持不稳定（如横竖屏切换后未重算），上线前务必真机验证
字体栈与 fallback 要写全（避免系统替换失真）
即使单位适配了，如果字体本身在设备上不存在，浏览器会按 font-family 列表逐个回退，最终可能落到差异极大的系统字体上（如 macOS 的 San Francisco vs Windows 的 Segoe UI）。
立即学习“前端免费学习笔记（深入）”；
- 中文优先声明：推荐
"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif，覆盖主流系统 - 英文补充无衬线体：如
"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif - 慎用 Web Font：加载延迟或失败会导致 FOUT（Flash of Unstyled Text），建议搭配
font-display: swap和本地字体兜底
统一字体渲染细节（提升一致性感知）
不同系统对字体的抗锯齿、字重平滑、字间距处理不同，CSS 可微调渲染表现：
- 启用子像素抗锯齿（尤其 macOS）：
-webkit-font-smoothing: antialiased；Windows 下可用font-smooth: always（已废弃但部分仍生效） - 控制字重渲染精度：
font-weight: 400比normal更明确，避免浏览器自动映射偏差 - 避免行高用
px，改用无单位数值（如line-height: 1.5），使其随字体大小自然缩放
