直接写"microsoft yahei"在macos上失效，根本原因是该字体未预装于系统，浏览器font-family匹配时仅查找已安装且支持当前字符集的字体，不自动fallback至列表后续字体；macos原生支持的是"pingfang sc"等字体。
为什么直接写 "Microsoft YaHei" 在 macOS 上会失效
不是浏览器不解析，而是字体名没被系统安装，浏览器按 font-family 列表从左到右匹配，遇到第一个「已安装且支持当前字符集」的字体就停。macOS 没装 "Microsoft YaHei"，也不会 fallback 到列表后半段的 sans-serif——它只认自己系统里真正存在的中文字体，比如 "PingFang SC" 或 "Heiti SC"。
实操建议：
- 永远用引号包裹含空格或中文的字体名：
"Microsoft YaHei"，而非Microsoft YaHei - 把各系统主力中文字体前置：
-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif - 避免把
"SimSun"放前面——Win11 默认不带宋体，"NSimSun"或"FangSong"更稳妥，但优先级仍应低于现代无衬线体 - 西文字体（如
Helvetica Neue）对中文文本无效，但它会影响混排中的英文、数字、标点渲染，所以仍需保留，只是位置靠后
font-size: 16px 是跨平台可读性的锚点，不是“越大越好”
16px 是桌面浏览器默认字号，也是移动端 Safari/Chrome 对小字号（14px，Windows 清晰度调低时文字发虚；设成 18px，窄屏卡片内标题易换行挤叠。
实操建议：
-
html元素不要设font-size，除非你真在构建整套 rem 缩放体系 - 正文统一用
p { font-size: 16px; line-height: 1.6; }，不依赖100%或rem起始值 - 标题用无单位倍数：
h2 { font-size: 1.5em; line-height: 1.4; }，保持比例关系，避免单位混用（px + rem）导致调试混乱 - 别用
clamp(1rem, 2.5vw, 1.125rem)套正文字号——中文字体在流体缩放下容易失重或糊边，不如媒体查询微调更可控
动画中文字位置飘移，本质是系统渲染差异
Windows 用 ClearType 做亚像素渲染，macOS 用灰度抗锯齿，同一 font-size 和 line-height 下，baseline 对齐位置常差 1–2px。动画若依赖 getBoundingClientRect() 或 transform: translateY()，就会跨平台“飘”。
实操建议：
- 动画关键帧里垂直位移改用
px，并预留 ±1px 容错，避免用em或ex - 加
-webkit-font-smoothing: antialiased; font-smoothing: antialiased;强制 macOS 禁用 subpixel 渲染，两边都走灰度——文字略发虚，但对齐稳定 -
@font-face中必须显式声明font-weight和font-style，否则加载期间 fallback 字体可能触发 layout shift - 启动动画前，用
document.fonts.load()等字体就绪再读尺寸，否则offsetHeight可能取到未加载完成的 fallback 值
中英文混排塌陷与 baseline 不齐，不能只靠 line-height
浏览器默认 line-height 是为英文设计的，直接设 1.6 会拉大英文小写字母间距，造成混排“空洞感”；而设太小（如 1.2），中文又粘连。更麻烦的是，中文字体 ascender/descender 度量若不合理，line-height 计算会失准。
实操建议：
- 中英混排正文首选
line-height: 1.6，它在 Baymard 热图测试中平衡了区分度与留白 - 纯中文长文可用
1.5，但必须确保margin-bottom≥0.8rem防止视觉拥挤 - 标点必须用全角：中文句号是
。，不是.；引号是“”，不是"" - 禁用全局
text-rendering: optimizeLegibility，它会让某些中文字体渲染异常，尤其在旧版 Safari 上
16px 不是教条，而是多数设备上可读性与渲染稳定性之间的实际交点；动画里文字一动就偏移，往往不是代码写错了，而是你没意识到 Windows 和 macOS 根本就没在画同一个 baseline。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
