@import 切换字体时，后加载的同名 font-family 会覆盖前者，但其同步阻塞、路径依赖及静默失败易致字体不生效；推荐用 css 变量 + 多组 @font-face 预加载并动态切换。
用 @import 切换字体时，CSS 文件加载顺序决定最终生效字体
浏览器按 CSS 规则出现的顺序应用字体，后载入、后解析的 @import 会覆盖前面同名 font-family 的 @font-face 声明。但注意：@import 是同步阻塞的——它会让后续 CSS 等待字体文件下载完成才继续解析，容易拖慢渲染。
- 只在
<style></style>或顶层 CSS 文件开头用@import，不能嵌套在规则块里（比如不能写在.btn { @import "..."; }中） - 多个
@import按书写顺序依次加载，不并行；想提速得改用<link rel="stylesheet"> - 如果两个
@import都定义了font-family: "MyFont"，后一个的@font-face才生效，但前提是它成功加载且未被 CORS 或 MIME 类型错误中断
常见错误：字体没变，控制台却没报错
这通常是因为字体文件路径不对，或服务器返回了 HTML 页面（比如 404 页）而非字体文件，而浏览器对 @import 的字体加载失败默认静默——不报错，也不应用。
- 检查网络面板，筛选
font或woff2，确认响应状态码是200，Content-Type 是font/woff2等合法类型 - 路径必须相对于当前 CSS 文件位置，不是 HTML 页面位置。例如
css/fonts.css里写@import "fonts/inter.woff2"，实际找的是css/fonts/inter.woff2 - 本地开发时，file:// 协议下多数浏览器禁用
@import加载字体，必须起本地服务（如npx serve）
真正快速切换字体的替代方案：CSS 变量 + 多组 @font-face
比反复改 @import 更可控：一次性声明所有字体，用 CSS 变量切换 font-family 值，不触发重下载。
/* 在主 CSS 中统一定义 */
@font-face {
font-family: "Inter";
src: url("fonts/inter.woff2") format("woff2");
}
@font-face {
font-family: "Roboto";
src: url("fonts/roboto.woff2") format("woff2");
}
<p>:root {
--font-body: "Inter", sans-serif;
}
body {
font-family: var(--font-body);
}- 切换只需改一行：
document.documentElement.style.setProperty('--font-body', '"Roboto", sans-serif'); - 所有字体提前加载，无白屏、无 FOIT/FOUT 激增
- 避免
@import的级联不确定性，也绕开它的跨域限制（@font-face本身支持crossorigin属性）
字体加载完成前的视觉 fallback 策略
即使用了 @font-face，字体加载期间仍可能显示系统字体。不能靠 @import 控制这个过程，得用 font-display 和 JS 检测。
立即学习“前端免费学习笔记（深入）”；
-
font-display: swap是最常用选择，能避免文本不可见（FOIT），但要注意“闪动”（FOUT）是否可接受 - 需要精确控制时机？用
document.fonts.load()+document.fonts.ready，例如：document.fonts.load("12px Inter").then(() => console.log("Inter ready")); - 别在
@import后立刻查document.fonts——它只反映@font-face声明，不保证资源已 fetch 完
@import 的路径和协议限制，在本地预览时最容易漏掉。 
