Sass不生成字体文件，仅生成CSS；必须手动准备woff2/ttf等文件并正确配置@font-face，路径、format声明、font-display:swap缺一不可，且需确保服务器MIME类型和CORS配置正确。
直接用 @font-face，别指望 Sass 自动生成字体文件
Sass 本身不处理字体文件打包或转换，它只负责生成 CSS。你必须先准备好 .woff2、.ttf 等字体文件，并手动配置 @font-face 规则。常见误区是以为写个 @each 就能“引入字体”——其实那只是批量定义类名，和字体加载毫无关系。
- 字体文件得自己下载或生成（比如用 Font Squirrel Webfont Generator）
-
@font-face必须出现在编译后的 CSS 中，且路径要能被浏览器实际请求到 - 如果你用的是 Vue/Vite/webpack，
url('./fonts/myfont.woff2')中的路径需匹配构建工具的资源解析规则（例如 Vite 支持url('@/assets/fonts/...')，但原生 Sass 不认识@别名）
@font-face 的 src 列表顺序和格式不能乱写
浏览器按 src 中的顺序尝试加载，一旦匹配就停止。顺序错、格式声明不匹配，会导致 fallback 失效或字体不渲染。
- 优先放
format('woff2')：现代浏览器支持好、体积小 - 接着放
format('woff')：兼容旧版 Chrome/Firefox - TTF/OTF 可作为兜底，但必须显式写
format('truetype')或format('opentype')，不能省略 - 错误示例：
src: url('font.ttf');—— 缺少format()，部分浏览器（如 Safari）可能忽略该条目
在 Sass 中管理字体路径和名称，用变量更安全
把字体名、路径、权重等抽成变量，避免硬编码，也方便多字体切换或主题适配。
- 定义变量时加
!default，便于在项目层覆盖：$font-primary-family: 'MyFont' !default; - 路径建议用相对路径（如
'../fonts/myfont.woff2'），避免依赖构建别名导致 Sass 编译失败 - 如果字体有多个字重，为每个
@font-face单独定义变量，不要复用同一组src - 别在
@font-face块里嵌套@if或@each来动态拼src——多数 Sass 实现不支持在@font-face内做条件逻辑，会报错或静默失效
字体加载失败时，font-display: swap 是关键补救项
没加 font-display，用户可能看到长时间空白文本（FOIT）；设成 swap 后，系统字体先撑开布局，自定义字体加载完成再替换。
立即学习“前端免费学习笔记（深入）”；
- 必须写在每个
@font-face块内，不能只写一次就全局生效 - 慎用
block（默认值）：移动端弱网下白屏风险高 -
fallback和optional对首屏体验改善有限，swap是目前最稳妥的选择 - 注意：IE 完全不支持
font-display，如有兼容要求，得靠 JS 加载检测 + class 控制回退
font/woff2）、CORS 是否允许跨域加载。这些环节一断，@font-face 再规范也没用。 
