@import引入Google Fonts最简但阻塞渲染，需加display=swap防FOIT；link预加载更优；注意字体子集、MIME类型、font-weight声明及font-display取值场景适配。
用 @import 在 CSS 里引入 Google Fonts 最简单
直接在样式表顶部加一行就能用，不用改 HTML 结构。但要注意加载时机：它会阻塞渲染，直到字体下载完成。
- 把
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');放在style.css开头 -
display=swap是关键参数，避免文字长时间空白（FOIT），浏览器会先用备用字体显示，再替换 - 别在
@import后面立刻写用该字体的规则——CSS 解析是顺序执行的，字体声明必须在使用前生效
用 <link> 标签在 HTML 中预加载更可控
比 @import 更早触发字体请求，还能配合 rel="preload" 提前拉取关键字重。
- 在
里写：<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet"> - 如果只用粗体和常规体，就别写
:wght@100;200;300...全量，减少 CSS 文件体积 - 本地开发时，
localhost下 Chrome 对font-display: swap支持稳定；但某些旧版 Safari 需要额外加font-display: optional才不卡住
自托管字体时，@font-face 的 src 和 format 必须匹配
常见错误是路径写错、格式声明不对，导致字体根本加载失败，控制台报 Failed to decode downloaded font 或直接静默忽略。
-
src要按兼容性从高到低排列，例如：url('./fonts/inter-bold.woff2') format('woff2'), url('./fonts/inter-bold.woff') format('woff') - 确保 Web 服务器对
.woff2返回font/woff2MIME 类型，Nginx 需手动加types { font/woff2 woff2; } - 别漏掉
font-weight和font-style，否则同一族字体多个文件可能被当成同一个，造成加粗失效
字体加载状态影响首屏体验，font-display 取值不能乱选
swap 不是万能解，有些场景反而更糟。比如长文本块 + 小字号 + 字重变化大，替换过程会造成明显重排（FOUC）。
-
block：短时间空白（约 3s），之后才显示后备字体 —— 适合 logo 或标题等非正文内容 -
optional：只在字体已缓存时用，否则直接跳过 —— 适合非核心品牌字体，降低首次加载压力 - 测试时打开 Chrome DevTools → Application → Clear storage → 硬刷新，才能真实模拟首次访问效果
字体文件体积和 HTTP 请求数容易被低估，尤其是中文字体。一个完整思源黑体变量字体可能超 10MB，这时候必须切子集或用 CDN 动态加载。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
