正确做法是将Google Fonts的标签加入HTML的中并添加display=swap参数，而非在SCSS中@import；SCSS中定义字体变量时需包含完整系统字体栈并显式声明中文字体，同时配合clamp()和字重变量实现响应式排版。
直接用引入Google Fonts，别在SCSS里@import
SCSS的@import不能加载远程CSS字体链接，强行写@import url('https://fonts.googleapis.com/css2?family=Inter')会导致构建失败或字体不生效。正确做法是把<link>标签加到HTML的里——这是唯一可靠、可被浏览器预加载、支持preconnect和preload优化的路径。
常见错误现象：字体在开发环境能显示，上线后空白；或者FOUT（字体切换闪烁）严重，控制台报CORS或Failed to load resource。
- 确保
rel="stylesheet"且href参数带display=swap（如https://fonts.googleapis.com/css2?family=Inter&display=swap） - 避免在SCSS中用
@import加载Google Fonts CSS，它不走CSSOM，无法触发字体加载生命周期 - 如果项目用Jekyll等静态生成器，把
<link>放在_includes/head.html这类全局模板里最稳妥
在SCSS中定义font-family变量时必须包含系统字体兜底
只写$font-primary: 'Inter', 'Roboto', sans-serif;不够安全。不同系统对同一字体名解析差异大，比如macOS识别'Inter'但Windows可能完全忽略它，导致回退到sans-serif后渲染成微软雅黑或Arial，字号/行高突变。
推荐写法是显式声明系统字体栈：
立即学习“前端免费学习笔记（深入）”；
$font-primary: 'Inter', 'system-ui', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
这样既保留了Google Fonts的视觉目标，又让未加载完成或加载失败时的降级体验可控。注意system-ui必须放第二位（紧随自定义字体后），否则会被某些旧浏览器忽略。
- 不要省略引号包裹含空格的字体名，如
'Segoe UI'，否则编译报错 - 避免把
sans-serif写在最前——它会跳过所有前面的字体，直接用系统默认无衬线体 - 如果项目需支持中文，建议额外加
'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei'等本地中文字体
font-display: swap必须由Google Fonts URL参数控制，不是SCSS能干预的
很多人以为在SCSS里写font-display: swap能优化FOIT（不可见文本闪烁），但Google Fonts返回的CSS规则里已固化了font-display行为。你手动加的@font-face块对它无效，反而可能因重复定义引发冲突。
通过 Gemini 搜索落地（主）和 Custom Search JSON API（备）进行 Google 网页搜索。用途：(1) 附引用的综合回答（落地搜索），(2) 含摘要的原始链接结果，(3) 图片搜索。希伯来语支持极佳。优于内置 web_search (Perplexity)。
真正起作用的是你在<link>的URL里传的display参数：
-
display=swap：文本立即显示系统字体，等自定义字体就绪后替换（推荐） -
display=block：短时间隐藏文本（约3s），易触发FOIT -
display=fallback：折中策略，2s内用系统字体，之后再换
如果你看到页面加载初期文字“闪一下”才变样，说明URL里没加&display=swap，而不是SCSS写得不对。
SCSS里真正该做的字体优化是响应式font-size + 字重映射
Google Fonts本身不解决响应式排版问题。你需要在SCSS中用rem或clamp()做动态字号，并配合字重变量统一调用，才能让字体真正“优雅”起来。
例如：
$font-weights: ( light: 300, regular: 400, medium: 500, bold: 700 );
然后在组件里用：
h1 { font-weight: map-get($font-weights, bold); font-size: clamp(1.5rem, 4vw, 2.5rem); }
这种组合比单纯引入字体更影响最终效果：它让标题在手机上不会过大，在桌面端不显单薄，且字重值来自变量，后期换字体族时只需改$font-weights一处。
容易被忽略的一点：Google Fonts链接里指定的字重范围（如family=Inter:wght@300;400;500;700）必须和SCSS中实际使用的font-weight值严格匹配，否则浏览器会 fallback 到最近可用字重，造成视觉偏差。
