这个 font-family 声明依次列出了 system-ui、-apple-system、BlinkMacSystemFont、Segoe UI、Roboto、Helvetica、Arial 以及 sans-serif，它背后的设计意图是什么？每个字体名称分别代表什么，浏览器在选择时遵循怎样的机制，以及这样写对跨平台渲染有何好处？
考察说明
考查对 CSS 字体栈中系统字体、回退机制及跨平台适配的理解。
回答思路
- 【回答框架 1】这个 font-family 列表是一个字体栈，浏览器会按顺序尝试使用第一个可用的字体，如果字体不存在或无法显示字符，则回退到下一个，直到找到可用的或最终使用通用字体族。
- 【回答框架 2】每个字体名称有特定指向：system-ui 是 CSS 中表示用户界面默认字体的通用族；-apple-system 和 BlinkMacSystemFont 分别对应 Apple 和 Chrome 的旧写法，用于匹配系统字体；Segoe UI 是 Windows 的界面字体；Roboto 是 Android 的默认字体；Helvetica 和 Arial 是常见的替代字体；sans-serif 是最终的无衬线通用回退。
- 【回答框架 3】这种写法能适应不同操作系统，例如在 macOS 上优先使用 San Francisco，在 Windows 上使用 Segoe UI，在 Android 上使用 Roboto，从而确保网页与系统风格一致，减小字体差异带来的布局偏移。
- 【回答框架 4】回退机制的关键在于，如果某个字体不存在但系统有下一个，则立即使用下一个；同时，这个列表保证了在大多数设备上都有合适的无衬线字体，不会因为缺失字体而退回丑陋的默认字体。
- 【关键点 1】字体栈按顺序选择第一个可用字体，缺失时回退到下一个。
- 【关键点 2】system-ui 是标准通用字体族，-apple-system 和 BlinkMacSystemFont 是旧式写法，用于 Apple 和 Chrome 系统。
- 【关键点 3】Segoe UI 指向 Windows，Roboto 指向 Android，Helvetica/Arial 作为跨平台常见替代。
- 【关键点 4】可提高跨平台视觉一致性和性能，避免使用自定义字体加载开销。
- 【易错点 1】不要认为字体顺序无关紧要，顺序决定优先使用哪个系统字体。
- 【易错点 2】不要忽略通用字体族，否则遇到未知字体可能无法正常显示。
- 【易错点 3】不要以为所有系统都支持相同字体，需要依赖回退机制保证兼容性。