如何用CSS的font-family配置中文字体回退？-css教程-PHP中文网

中文字体回退链失效主因是语法错误导致整条声明被浏览器弃用；需确保中文字体名加英文引号、逗号后无空格、末尾用合法通用族名（如sans-serif），否则windows显示宋体、mac卡在helvetica、linux fallback至times new roman。

如何用css的font-family配置中文字体回退？

中文字体回退链写不对，Windows 用户大概率看到宋体，Mac 用户可能卡在 Helvetica（它压根不支持中文），Linux 用户直接 fallback 到 Times New Roman —— 这不是字体没加载，是 font-family 声明本身断在了半路。

为什么“PingFang SC, Microsoft YaHei, sans-serif”会失效

常见错误不是字体名写错，而是语法破坏了回退链：

中文字体名含空格却没加英文引号，比如写成 PingFang SC 而不是 "PingFang SC"，浏览器直接当两个独立 token 解析，整条声明作废
逗号后多加了空格，如 "PingFang SC", "Microsoft YaHei"（中间两个空格），Safari 旧版本会截断后续所有字体
末尾写成 sans serif（两个词）或 system-ui（不是通用族名），浏览器无法识别为合法回退终点，直接弃用整条声明

跨平台可用的最小安全回退链怎么写

不追求完美，只保证每个主流系统都有合理兜底：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

Mac：优先 "PingFang SC"，次选 -apple-system 或 BlinkMacSystemFont（注意大小写）
Windows：必须显式写 "Microsoft YaHei"，SimSun 已淘汰，别放进去占位
Linux / 无中文字体环境：末尾必须是 sans-serif，不能是 serif 或漏掉
推荐一行写死：font-family: "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

body 设置了 font-family，input 和 button 为啥还是难看

因为浏览器 UA 样式表里，input、button、textarea 默认自带 font-family，比如 monospace 或系统等宽字体，直接覆盖 body 的继承。

检查方式：开发者工具 → Computed → font-family，点开来源看是不是来自 user agent stylesheet
修复必须显式重置：button, input, select, textarea { font-family: inherit; }
别漏掉 html 层：某些 reset.css 只设了 html { font-size: 100%; } 却没设字体，导致继承链从 html 就断了

@font-face 加载成功但字体还是不显示

自定义字体生效的前提，是它能被正确匹配进回退链：

@font-face 中的 font-family 值（比如 "Noto Sans CJK SC"）必须和你在元素上写的完全一致：大小写、空格、引号一个都不能差
Network 面板确认字体文件返回 200，且 MIME 类型正确（font/woff2 等）；CORS 错误或 404 会让整个 @font-face 规则静默失效
即使加载成功，也要保留回退链——网络中断、字体损坏、font-display: swap 未触发时，用户看到的仍是回退字体

最常被忽略的一点：回退链不是“写了就管用”，而是“断一处，全链废”。引号、逗号、通用族名，三个位置任意一个出错，浏览器就放弃整条声明，退回到 UA 默认字体。检查时不要只盯字体名，先盯语法。