Less 不支持运行时动态引入 CSS 字体文件，因其是编译时预处理器，@import 仅在编译阶段解析；可通过变量配置字体路径并生成多权重 @font-face 声明，或交由 JS 动态加载。
Less 本身不支持运行时动态引入 CSS 字体文件
Less 是编译时预处理器，@import 只在编译阶段解析并内联内容，无法生成浏览器运行时才加载的 @font-face 规则或异步请求。所谓“动态引入”，实际要解决的是：如何让字体文件路径可配置、按需生成不同 @font-face 声明，或与构建流程配合实现条件加载。
用 Less 变量 + @font-face 实现路径可配置
这是最常用也最可控的方式：把字体文件路径抽成变量，在 @font-face 中引用，编译后生成静态但可维护的 CSS。
-
@font-path必须是相对路径（相对于最终生成的 CSS 文件），不能是 URL 或运行时变量 - 变量值不能含空格或特殊字符，否则需加引号，且 Less 会原样输出到 CSS 中
- 同一个字体族建议用不同
font-weight和font-style区分多个@font-face块
@font-path: "../fonts/inter";
@font-family-name: "Inter";
@font-face {
font-family: @font-family-name;
src: url("@{font-path}-regular.woff2") format("woff2"),
url("@{font-path}-regular.woff") format("woff");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: @font-family-name;
src: url("@{font-path}-bold.woff2") format("woff2"),
url("@{font-path}-bold.woff") format("woff");
font-weight: 700;
font-style: normal;
}
避免在 Less 中拼接 URL 参数或版本号
像 url("@{font-path}.woff2?v=@{version}") 这种写法看似能“动态缓存控制”，但实际无效：
- Less 编译时
@version是字符串，不会触发浏览器重新请求新资源 - 构建工具（如 Webpack/Vite）通常已有 hash 或 contenthash 机制，手动加
?v=反而干扰缓存策略 - 若真需版本控制，应在构建配置中统一处理字体文件输出名，而非在 Less 里硬编码
真正需要运行时动态加载？交给 JS 或 HTML
如果业务场景确实要求根据用户偏好、语言或主题切换字体（例如中文字体 fallback 切换、夜间模式换字重），Less 不适合介入：
- 用
document.fonts.load()或第三方库（如webfontloader）控制加载时机和失败回调 - 通过
动态插入字体 CSS，或直接注入@font-face字符串到 - Less 可以只定义基础字体族名（如
@font-sans: "Inter", "Segoe UI", sans-serif;），由 JS 控制是否启用对应字体
容易被忽略的一点：字体加载完成前的 FOIT/FOUT 行为，必须用 font-display 控制，而它只能写在 @font-face 块里——这意味着哪怕用 JS 注入，也要确保该属性一并写入，不能依赖 Less 变量生成。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
