为什么CSS字体在Windows和macOS中显示不一致-css教程-PHP中文网

根本原因是macos与windows字体渲染引擎不同：macos用core text+quartz，windows用directwrite+cleartype，导致同一css属性解释差异巨大；-apple-system仅在apple设备生效，windows忽略后若无后续字体如"segoe ui"便会回退至times new roman。

为什么css字体在windows和macos中显示不一致

根本原因不是CSS写错了，而是两个系统用的字体渲染引擎完全不同：macOS 用 Core Text + Quartz，Windows 用 DirectWrite + ClearType。它们对同一份 font-weight、letter-spacing 甚至抗锯齿方式的解释天差地别。

为什么 -apple-system 单独用会让 Windows 显示成 Times New Roman

因为 -apple-system 是 WebKit/Blink 内核在 Apple 设备上的专用别名，指向 San Francisco 字体。Windows 浏览器看到它直接忽略，然后顺位找下一个——如果后面没接 "Segoe UI" 或 Roboto 这类 Windows/Linux 友好字体，就会一路回退到浏览器默认 serif 字体，常见结果就是 Times New Roman 突然出现。

正确做法是把它当作“macOS 优先项”，必须搭配其他平台字体，并以 sans-serif 收尾：

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "PingFang SC", "Microsoft YaHei", sans-serif;
顺序不是罗列，而是按平台适配优先级分层：macOS → Windows → Linux → 中文环境 → 通用兜底
含空格的字体名（如 "Segoe UI"）必须加英文双引号；纯通用族名（如 sans-serif）不加引号

为什么加粗（font-weight: bold）在两边看起来粗细不同

Core Text 在 macOS 上对 Bold 字重会做激进笔画填充，尤其在 Retina 屏上追求轮廓平滑；DirectWrite 在 Windows 上则更依赖字体自身的 hinting 数据，且默认启用 ClearType 子像素渲染，导致视觉重量偏重、边缘更硬。

这不是调高 font-weight 数值就能解决的，因为：

macOS Notes

通过 AppleScript 创建、读取、搜索及管理 macOS 备忘录。适用于用户要求记笔记、记录事项、保存想法、创建会议记录等场景。

下载

font-weight: 600 在 macOS 上可能等效于 Windows 的 700，反之亦然
强行设 font-weight: 900 容易让 Windows 文字糊成一团，macOS 却可能依然纤细
某些中文字体（如 PingFang SC Semibold）在 Windows 上根本不存在，浏览器只能 fallback 到 Microsoft YaHei，而后者 Bold 渲染逻辑完全不同

为什么 -webkit-font-smoothing 没效果或反而更糟

-webkit-font-smoothing 不是标准属性，只在 WebKit/Blink 内核中部分生效，且行为严重依赖系统底层机制：macOS 默认用 subpixel 抗锯齿（柔），Windows 实际走 grayscale（硬）。你设了 antialiased，macOS 会切到灰度模式，字变细、对比变强，可读性反而下降；而在 Windows 上它基本不触发任何变化。

更麻烦的是，这个属性会被很多常见操作自动禁用：

只要元素有 font-weight: bold 或 transform: scale()，WebKit 就会强制回退到系统默认渲染
全局写在 body 上容易被框架样式（如 React 组件内联样式）覆盖
和 backface-visibility: hidden 或 will-change: transform 同时用，会干扰渲染管线，导致失效
真正生效要看 computed styles 里是否显示 applied，不能只看 declared

@font-face 引入后还是不一致？检查这三件事

自定义字体引入失败，90% 是格式兼容或加载时机问题，而不是 CSS 写法本身。

确保 @font-face 声明包含多格式：.woff2（Chrome/Firefox）、.woff（Safari 旧版）、.ttf（部分 Android），IE 还得加 .eot
必须配 font-display: swap，否则字体加载完成前会 fallback 到系统字体，造成闪动和不一致
中文场景下，font-feature-settings 对中文字体几乎无效，别浪费时间调试 "liga" 或 "kern"