中英字体必须分层排序：纯英文字体置前、双语字体居中、sans-serif收尾；中文字体名需英文引号；ie7/8不支持字符级fallback；漏掉通用字体族将导致linux/docker等环境回退异常。
直接把中英文字体混在同一个 font-family 里写，不加区分、不控顺序、不验 fallback，90% 的项目会在 Linux、Docker 或旧系统上出字体回退异常——比如英文发虚、中文突然变宋体、行高错乱。
font-family 里中英字体必须分层排序
浏览器不是按“当前字符是中文还是英文”来选字体，而是按“当前字体文件是否包含该字符”逐个尝试。所以顺序错了，效果就全偏了。
-
"Helvetica Neue"和Arial必须放最前：它们不含中文，遇到中文自动跳过，英文渲染干净 -
"Microsoft YaHei"、"PingFang SC"这类中英双语字体放中间：承担中文主力 + 英文兜底 -
sans-serif必须放最后且不加引号：它是系统级保底，macOS 用 San Francisco，Windows 用 Segoe UI，Linux 常用 Noto Sans，都带基础中文支持 - 中文字体名含空格或中文，必须用英文双引号包裹：
"Microsoft YaHei"✅，Microsoft YaHei❌（整个声明可能被忽略）
Less 里不能直接在 variables.less 写 @font-face
Less 的 @import 是静态展开机制。如果把 @font-face 塞进 variables.less，所有 import 它的模块都会复制一遍规则，导致字体重复声明、多次请求、CSS 体积膨胀，甚至部分字体加载失败。
-
variables.less只定义参数：@font-zh-sans: "Microsoft YaHei", "PingFang SC";、@font-en-sans: "Helvetica Neue", Arial; -
@font-face规则必须单独抽到fonts/base.less，并在主入口（如app.less）中显式@import "fonts/base.less";一次 - 多套字体需语义化前缀，避免变量覆盖：
@font-zh-serif和@font-en-serif分开管理
IE7/8 下中英分设完全失效，但你大概率不用管
IE7/8 不识别“字体是否支持某字符”，只看“字体是否存在”。只要系统装了 "Microsoft YaHei"，它就会强制用于全部文字——英文也被拉去走微软雅黑，小字号下明显发虚。
- 若真要兼容（极少见），放弃中英分离，统一用一个双语字体：
font-family: "Microsoft YaHei", SimSun, sans-serif; - 更现实的做法：打开 DevTools 的 Computed 面板，直接看
font-family最终解析结果，比猜兼容性更可靠 - 现代项目（2026 年）基本可忽略 IE7/8；但接手遗留系统时，先查 UA 和实际渲染，再决定要不要降级方案
别漏掉通用字体族这道防线
只写 font-family: "Microsoft YaHei", "PingFang SC"; 是危险的——Linux 桌面、某些 Docker 容器环境可能两个都没有，浏览器会 fallback 到 DejaVu Sans 或其他不可控字体，中文字体突然变细、行高塌陷。
- 永远以
sans-serif或serif收尾，且不加引号：font-family: "Helvetica Neue", Arial, "Microsoft YaHei", sans-serif; - 这个末尾的
sans-serif不是摆设，它是最后一道可控的系统级兜底 - 不要单独写一行
font-family: sans-serif;——这等于放弃所有定制，把决定权彻底交给系统
最容易被忽略的是：字体 fallback 是逐字符发生的，不是整行或整块。一个 h1 里混着英文标题和中文副标，可能前半段走 Helvetica，后半段跳微软雅黑，而你只在 DevTools 里看 computed style，根本看不出差异。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
