纯英文字体须置前、中英双语字体居中、通用字体族放最后；中文字体名需英文引号；ie7/8不支持字符级fallback；font-weight/font-style不可混入font-family。
font-family 里中英文字体顺序不能颠倒
浏览器不是按“字符语言”智能切换字体，而是按“字体文件是否支持当前字符”来决定是否跳过。Arial 不含中文字符集，遇到中文就自动 fallback 到下一个；而 "Microsoft YaHei" 同时含中英文，但渲染英文效果通常不如 Arial 或 "Helvetica Neue"。所以必须把**纯英文字体放前面，中英双语字体放中间，通用字体族放最后**。
常见错误是把 "Microsoft YaHei" 写在最前——结果所有文字（包括英文）都走微软雅黑，导致小字号下英文发虚、字间距不均。
- 正确顺序示例：
font-family: "Helvetica Neue", Arial, "Microsoft YaHei", sans-serif; - 中文字体名含空格，必须加英文引号，否则声明可能被整个忽略
- 避免混用大小写或全角标点，比如
“微软雅黑”（中文引号）或Microsoft yahei（小写 y）都会失效
IE7/IE8 的 fallback 行为完全不可信
这些老版本不识别“字体是否支持某字符”，只认“字体是否存在”。一旦系统装了 "Microsoft YaHei"，它就会强制用于全部文字，不管当前是英文还是中文。
如果你仍需兼容 IE7/IE8（极少见），只能放弃中英分设，统一用一个中英双语字体，比如：
font-family: "Microsoft YaHei", SimSun, sans-serif;- 或退到更保守的
SimSun（宋体），但英文显示会明显偏弱
现代项目基本可忽略这点，但若接手遗留系统，打开 DevTools 的 Computed 面板看 font-family 实际解析结果，比猜更可靠。
中文字体后必须接通用字体族
只写 "Microsoft YaHei", "PingFang SC" 是危险的——万一用户系统两个都没有（比如 Linux 桌面或某些 Docker 容器环境），浏览器可能回退到不可控的默认字体，甚至触发系统级 fallback（如 DejaVu Sans），导致中文字体突然变细、行高错乱。
通用字体族（sans-serif、serif）不是摆设，它是最后一道防线：
-
sans-serif在 macOS 是San Francisco，Windows 是Segoe UI，Linux 常是Noto Sans，都带基础中文支持 - 永远把
sans-serif或serif放在列表末尾，且不加引号 - 不要写
font-family: sans-serif;单独一行——这等于放弃所有定制，直接交由系统决定
font-weight 和 font-style 不能塞进 font-family
font-family: "Helvetica Neue Bold" 这种写法是无效的。浏览器会尝试加载一个叫 “Helvetica Neue Bold” 的完整字体文件名，但实际系统里只有 "Helvetica Neue" 这个家族名，粗体靠 font-weight: bold 触发。
一旦写错，整个 font-family 声明可能被跳过，退回到父级或浏览器默认值。
- 正确拆分：
font-family: "Helvetica Neue", Arial, sans-serif;+font-weight: 600; - 斜体同理：
font-style: italic;单独控制，不参与font-family列表 - 如果要用特定字重变体（如
"Helvetica Neue Light"），那是另一个独立字体家族，需单独声明并确保文件存在
真正容易被忽略的是：字体 fallback 是逐字符发生的。一个 <p></p> 里既有英文单词又有中文标点，浏览器可能对每个字符单独查一次字体列表。所以顺序不对，不只是“整体换字体”，而是“同一行里英文字模糊、中文块发虚”这种细微但刺眼的问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
