mac与windows上font-weight显示差异源于core text和directwrite渲染逻辑不同：前者主动加粗增强对比，后者优先保清晰致视觉偏轻；需用font-synthesis控制合成行为、引入全字重web font并正确声明@font-face，配合分层字体栈实现跨平台一致。
font-weight数值在Mac和Windows上为什么看起来不一样
不是你写错了font-weight，是Core Text（macOS）和DirectWrite（Windows）对“加粗”的实现逻辑不同：前者主动加厚笔画、增强对比度，让700看着更实；后者优先保清晰、防糊，同一数值下视觉重量天然偏轻。这种差异在Retina屏和高DPI设备上尤其明显，甚至同一段文字的笔画粗细能差20%以上。
- 这种差异无法靠
font-weight微调数值（比如改650）来抹平，因为浏览器不会插值渲染，只会 fallback 到最接近的可用字重 -
-webkit-font-smoothing只在macOS生效，Windows下完全忽略，硬写反而可能干扰ClearType策略 - 系统字体（如
"PingFang SC"、"Microsoft YaHei"）本身不提供细粒度字重档位，600和700大概率指向同一个物理字形
用font-synthesis显式控制浏览器是否“合成”加粗
当字体文件里没有对应font-weight时，浏览器会自动“合成”粗体——这个行为叫 font synthesis。Mac默认更激进，Windows更保守，导致跨平台偏差被放大。
-
font-synthesis: none;：禁用合成，强制只用字体文件里真实存在的字重。适合你已提供完整字重（Regular / Medium / Bold / Black）的Web Font场景 -
font-synthesis: weight;：仅允许合成字重（不合成斜体），减少意外变形，中文场景下比默认all更可控 - 避免
font-synthesis: all;（默认值），尤其在中文字体中，合成粗体容易发虚、边缘模糊
示例：
h1 {
font-family: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif;
font-weight: 700;
font-synthesis: weight;
}
换用支持全字重档位的Web Font并正确声明@font-face
系统字体不可控，真正能统一的方式是引入带明确字重映射的Web Font，并为每个档位单独声明@font-face。
- 优先选
Inter、HarmonyOS Sans、阿里巴巴普惠体等开源中文字体，它们提供300–900全档位 - 每个
font-weight必须对应独立的@font-face规则，不能共用一个font-family名+不同font-weight - 必须搭配
font-display: swap，避免加载期间回退到系统字体造成粗细跳变
错误写法（400会失效）：
@font-face {
font-family: "MyFont";
src: url("bold.woff2") format("woff2");
font-weight: 700;
}
构建分层font-family回退链，按系统优先调用本地字体
不追求“统一字体”，而是让各系统优先用自己最顺滑的默认字体，再逐级回退。
- macOS优先：
-apple-system、BlinkMacSystemFont - Windows优先：
"Segoe UI"、"Helvetica Neue" - Linux/Android兜底：
Ubuntu、Roboto、Cantarell - 所有字体名含空格必须加英文双引号，
sans-serif必须保留作为最终兜底
推荐写法：
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
最常被忽略的一点：字体栈顺序不是“哪个好看放前面”，而是“哪个系统原生支持放前面”。写反了，比如把"Segoe UI"放在-apple-system前面，Mac用户就永远用不上苹方，反而被迫回退到次优字体。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
