scss 的 @import 无法加载远程 google fonts，必须下载其 css 内容并本地化，替换字体文件路径为相对地址，确保每个 @font-face 包含 font-display: swap，且构建工具正确处理 css 文件。
直接@import Google Fonts CSS在SCSS里会失败
SCSS 的 @import 只能处理本地文件或 Sass 模块，不能解析远程 URL。如果你在 _custom.scss 里写：@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap";，编译会报错或静默忽略——它根本不会发 HTTP 请求，更不会把字体规则注入 CSS。
正确做法：下载 CSS 内容并本地化引入
Google Fonts 页面点击「+」选中字体后，右下角「@import」标签给出的 URL，实际指向一个动态生成的 CSS 文件（含多个 @font-face）。你需要把它「落地」：
Golang Google Wire
下载
在 Go 中使用 google/wire 实现编译时依赖注入——wire.NewSet、wire.Build、wire.Bind（接口→实现）、wire.Struct、wire.Value、wire.Interface
- 用浏览器打开该 URL（如
https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap），全选复制返回的 CSS 内容 - 新建文件
src/assets/fonts/google-inter.css，粘贴保存（注意：不要改里面任何font-family名、src路径或format()） - 在主 SCSS 入口（如
main.scss）顶部加：@import "../assets/fonts/google-inter.css"; - 确保构建工具（Vite/Webpack）能把
.css文件当作普通资源处理，而不是尝试 Sass 编译（Vite 默认支持；Webpack 需确认css-loader已启用）
关键陷阱：字体文件路径仍指向 Google CDN
你复制过来的 google-inter.css 里，src 属性还是类似 url(https://fonts.gstatic.com/...)。这在 phpdesktop、内网环境或禁外网的 CI 构建中必然 404。必须手动替换：
- 下载对应 WOFF2/WOFF 文件（可从同一页面的 Network 面板找字体请求，或用第三方工具如 google-webfonts-helper）
- 存到项目本地，例如
src/assets/fonts/inter/Inter-Regular.woff2 - 用文本替换把
google-inter.css中所有url(https://fonts.gstatic.com/...)改成相对路径：url("../fonts/inter/Inter-Regular.woff2") - 检查每个
@font-face的font-weight和font-style是否与你实际引用的 CSS 类匹配（比如用了font-weight: 700;却只下了 Regular 文件，就会回退）
必须加 font-display: swap，且不能依赖 CSS 里的默认值
Google Fonts 返回的 CSS 通常已带 font-display: swap;，但如果你手动改过内容或用了旧版链接（如 css? 而非 css2?），可能漏掉。没这个声明，Chrome/Firefox 会阻塞文本渲染（FOIT），导致首屏空白或布局跳动（CLS）。
- 打开
google-inter.css，逐个确认每个@font-face块末尾都有font-display: swap; - 如果缺失，手动补上——别信注释或文档说“默认就是 swap”，
font-display的默认值是auto，行为因浏览器而异 - 验证方法：禁用网络后刷新页面，文字应立即以系统 sans-serif 显示，几秒后才替换成 Inter；若变方块或长期空白，说明
swap没生效或字体路径错
font-display 漏写导致 Core Web Vitals 直接变红。每次改完，务必用 DevTools 的 Network 面板看字体文件是否 200 加载，再用 Elements → Computed → Font Family 确认最终生效的是哪个名字。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
