直接用@font-face配合sass变量和mixin管理字体路径、字重与font-display；将字体路径（如$font-path: "../assets/fonts/"）和字体族名（如$font-family-inter: "inter"）统一变量化，避免硬编码导致迁移困难与拼写错误；通过@mixin font-face($family, $filename, $weight, $style)封装多格式src回退、font-display: swap等逻辑，调用简洁且防冗余；font-display优先选swap以平衡加载性能与渲染体验。
直接用 @font-face + Sass 变量和 mixin 管理字体路径、字重、font-display，别写运行时逻辑——Sass 不感知屏幕，所谓“动态加载”只是编译时生成确定 CSS。
怎么用 Sass 变量统一管理字体路径和名称
硬编码路径（如 url("fonts/inter-bold.woff2")）会导致迁移困难、多环境路径不一致、拼写错误难发现。
- 把路径抽成变量：
$font-path: "../assets/fonts/"，所有@font-face都用url("#{$font-path}inter-bold.woff2") - 字体族名也变量化：
$font-family-inter: "Inter"，避免在多个@font-face中手输不一致 - 注意：Sass 变量不能跨文件自动共享，必须在入口
.scss中@use或@import字体变量文件 - 路径末尾不加斜杠，拼接时更可控；否则容易出现
fonts//inter.woff2这类双斜杠错误
为什么用 @mixin 而不是重复写 @font-face
每个字重+样式组合（如 Inter Bold、Inter Italic、Inter Bold Italic）都写一遍 @font-face 会冗余且易错。
- 写一个通用 mixin：
@mixin font-face($family, $filename, $weight: 400, $style: normal) - 内部封装
src多格式回退、font-display: swap、font-weight和font-style - 调用时只需：
@include font-face($font-family-inter, "inter-bold", 700) - 别在 mixin 里塞
local()声明——多数用户没装这些字体，反而增加解析负担；真要加，也只加最常见本地名（如local("Inter Bold")）
font-display 值怎么选才不闪屏又不阻塞
font-display: swap 是目前最稳妥的选择，但不是万能解药。
-
swap：文本先用后备字体渲染，字体加载完再替换——FOIT 时间短，但可能有布局偏移（FOIT → FOUT） -
optional：仅当字体缓存命中时才用，否则全程用后备字体；适合非关键字体（如装饰性标题字体） -
block：强制等待字体加载，白屏风险高，仅限极小字体文件（ - Sass 无法根据文件大小自动选策略，所以必须人工判断并写死在 mixin 或变量里，例如：
$font-display-default: swap
Webpack / Vite 下 Sass 字体路径失效的常见原因
编译后 CSS 中字体路径 404，不是 Sass 写错了，而是构建工具没正确解析 url() 里的相对路径。
- Webpack 5+ 必须用
type: "asset/resource"处理字体，且generator.filename要匹配 Sass 中写的路径层级 - Vite 默认支持
url()，但若字体放在src/assets/fonts/，Sass 中就得写url("../assets/fonts/inter.woff2")，不能省略../assets -
resolve-url-loader在 Webpack 中常被漏配，导致 Sass 编译后url()仍为相对路径，未被 loader 重写 - Next.js 用户注意：
public/fonts/是公开目录，Sass 中应写url("/fonts/inter.woff2")（绝对路径），而非相对路径
真正容易被忽略的是：Sass 本身不处理字体加载时机、缓存策略或网络条件适配。它只负责生成干净、可维护的 CSS。字体是否快、是否 fallback 合理、是否按需加载，得靠构建配置、font-display、HTTP 缓存头和运行时 JS（如 FontFace.load()）协同解决——Sass 只管“写得对”，不管“跑得稳”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
