@import 不适合按需加载文字样式，因为它是同步阻塞的，会暂停后续样式解析与渲染，拉长瀑布链、恶化LCP，且无法动态控制加载时机、不支持真正懒加载，与按需目标背道而驰。
为什么 @import 不适合按需加载文字样式
直接说结论：@import 在 CSS 中是同步阻塞的，浏览器解析到它时会暂停后续样式的解析和渲染，直到被引入的 CSS 文件下载、解析完成。这对“按需加载”目标完全背道而驰——你本想只在用到某类文字样式（比如中文字体、小字号排版、行高微调）时才加载，结果反而拖慢了首屏。
常见错误现象：@import 放在 body 后面或某个组件 CSS 里，以为“只影响局部”，实际它仍会在整个 CSS 解析流中触发网络请求阻塞；更隐蔽的是，多层嵌套 @import（A.css → @import B.css → @import C.css）会让瀑布链拉得极长，LCP 直接恶化。
- 所有
@import必须出现在 CSS 文件开头（否则无效），无法动态控制加载时机 - 不支持
media条件懒加载（@import url(x.css) screen and (min-width:768px)是合法的，但依然同步阻塞，且多数构建工具会提前内联或报 warning） - 现代打包工具（Vite/Webpack）对
@import的处理往往不如import语句可控，容易误打包进主包
真正可行的按需加载文字样式方案
核心思路：把文字相关样式（如 .text-sm、.font-sans、.leading-relaxed）从全局 CSS 剥离，用 JS 控制加载时机，或通过构建时条件注入。
- 用
link[rel="stylesheet"][media="print"]+onload切换media，实现“加载完再启用”：<link rel="stylesheet" href="text-styles.css" media="print" onload="this.media='all'">
- 在需要文字样式的组件挂载时，动态插入
link标签（注意防重复）：document.querySelector('link[href="text-styles.css"]')存在就跳过 - Vite 用户可利用
import()动态导入 CSS 模块：await import('./text-styles.css')，配合defineExpose或事件触发
@import 和 import 容易混淆的点
很多人看到 @import url('fonts.css') 就以为和 JS 的 import 一样能做代码分割或 tree-shaking，其实完全不是一回事。
立即学习“前端免费学习笔记（深入）”；
-
@import是 CSS 规范里的语句，运行在浏览器 CSS 解析器中，无模块概念，无作用域，无导出 -
import './text-styles.css'是 JS/构建工具层面的语法，由打包器处理，可参与 chunk 分割、条件加载、甚至 CSS in JS 提取 - 如果用了 Tailwind 或 UnoCSS，
@import引入的样式不会被 PurgeCSS 扫描，导致“以为按需实则全量”
字体文件和文字排版样式的加载要分开考虑
文字样式（font-size、line-height、letter-spacing）本身几乎零体积，真正耗时的是字体文件（.woff2）。所以“按需加载文字 CSS”这个说法本身就有误导性——你真正该控制的是字体资源的加载策略。
- 用
font-display: optional配合@font-face，让浏览器决定是否加载字体（而非靠 CSS 文件加载时机） - 对非关键文字（如页脚版权、隐藏区域文本），用
font-familyfallback 链兜底，避免强制触发字体下载 - 若真要拆分排版规则，建议按语义拆成
typography-base.css、typography-chinese.css，再用link[preload]+onload精确控制
最常被忽略的是：文字样式本身不需要“按需加载”，需要按需的是字体资源和特定语言的度量适配逻辑（比如中文行高补偿）。把注意力放在 CSS 文件切分上，反而掩盖了真实瓶颈。
