font-weight在Mac与Windows显示不一致，根本原因是Core Text（macOS）和DirectWrite（Windows）对加粗的实现逻辑不同：前者增强笔画厚度与对比度，后者侧重保清晰防糊；CSS无法直接覆盖系统级渲染差异。
为什么 font-weight 在 Mac 和 Windows 上看起来不一样
这不是你的 font-weight 写错了，而是 Core Text（macOS）和 DirectWrite（Windows）对“加粗”的实现逻辑根本不同。Core Text 会主动增强笔画厚度和对比度，让 font-weight: 700 看起来更实；DirectWrite 更倾向保清晰、防糊，同一数值下视觉重量天然偏轻。Safari、Chrome/macOS 和 Chrome/Windows 渲染同一条 CSS，结果却像两个字体——这是系统级差异，CSS 无法直接“覆盖”。
用 font-weight 配合 font-synthesis 控制合成行为
浏览器在找不到对应字重的字体文件时，会自动“合成”粗体或斜体，这个过程叫 font synthesis。Mac 的合成更激进，Windows 更保守，导致同一 font-weight 渲染结果偏差放大。你可以用 font-synthesis 显式干预：
-
font-synthesis: none;：禁用合成，强制只用字体文件里真实存在的字重——适合你已提供完整字重（如 Regular / Bold / Black）的 Web Font 场景 -
font-synthesis: weight;：仅允许合成字重（不合成斜体），减少意外变形 - 慎用
font-synthesis: all;（默认值）：尤其在中文场景下，合成粗体容易发虚、边缘模糊
示例：
h1 { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; font-weight: 700; font-synthesis: weight; }
换用带明确字重映射的 Web Font
系统字体（如苹方、微软雅黑）本身不提供细粒度字重档位，font-weight: 600 和 700 可能指向同一个物理字形。真正可控的方式是引入支持多字重的 Web Font，并在 @font-face 中显式声明每个档位：
- 优先选 Inter、HarmonyOS Sans、阿里巴巴普惠体等开源中文字体，它们提供 300–900 全档位
-
@font-face必须为每个字重单独声明，不能共用一个font-family名 + 不同font-weight - 搭配
font-display: swap，避免加载期间回退到系统字体造成粗细跳变
错误写法：@font-face { font-family: "MyFont"; src: url("bold.woff2") format("woff2"); font-weight: 700; } → 缺少 Regular 档，font-weight: 400 会失效
针对中文标题做平台级微调
当必须依赖系统字体且无法引入 Web Font 时，可借助 @supports + -webkit-font-smoothing 做有限干预：
- macOS/Safari 下加粗感过强？尝试
-webkit-font-smoothing: antialiased;（减弱子像素渲染） - Windows/Chrome 下显得太细？可小幅提升
font-weight（如从 700 → 750），但仅限数字或英文标题——中文系统字体不识别非标准值 - 最稳妥做法：对关键标题用
text-shadow: 0 0 1px rgba(0,0,0,.08);在 Windows 上模拟轻微加粗，Mac 上几乎不可见，不影响设计一致性
注意：-webkit-font-smoothing 仅影响 macOS/iOS，且现代 Safari 已逐步弃用，不要依赖它作为主要方案。
真正难解决的不是“怎么让两边一样”，而是接受系统字体的不可控性——Web Font 提供字重控制权，系统字体提供性能与体验，选哪条路，取决于你愿意为一致性付出多少加载代价和版权成本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
