应为 font.googleapis.com 和 fonts.gstatic.com 添加 preconnect，且 fonts.gstatic.com 必须带 crossorigin 属性；Google Fonts URL 需含 &display=swap 参数以避免 FOIT；禁用 @import 和旧版 css 端点；按需加载字重与 latin 子集以减小体积。
link rel="preconnect" 要加在 font.googleapis.com 前面
不加 preconnect，浏览器要等 DNS 查询、TCP 握手、TLS 协商全走完才开始下载字体，首屏渲染容易卡顿。加了之后，浏览器会在解析到 时就提前建立连接，后续请求字体 CSS 和 WOFF2 文件更快。
必须写成这样：
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
注意两点：
-
fonts.gstatic.com必须带crossorigin属性，否则字体文件可能因 CORS 被拒绝加载 - 两个
preconnect标签都要放在所有字体之前，顺序不能错 - 别对
google.com或www.google.compreconnect —— 没用，还占连接数
font-display: swap 是关键 CSS 控制项
光靠 HTML 预连接不够，字体 CSS 里没配 font-display，页面仍会阻塞文字渲染（FOIT）。必须确保引入的 Google Fonts URL 包含 &display=swap 参数：
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet">
这个参数会让浏览器：
- 立即用系统字体渲染文字（FOUT）
- 后台异步加载字体，加载完成立刻替换
- 避免空白文本闪烁（FOIT）或长时间不可读
如果手动写 @font-face，font-display 值必须显式设为 swap，不能省略或写成 auto。
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
避免 @import，禁用重定向链
Google Fonts 的 css 端点（如 fonts.googleapis.com/css）已弃用，会 301 跳转到 css2。用旧地址会导致多一次网络往返：
- ❌ 错误：
https://fonts.googleapis.com/css?family=Roboto - ✅ 正确：
https://fonts.googleapis.com/css2?family=Roboto&display=swap
同时，绝对不要在 CSS 里用 @import url('https://fonts.googleapis.com/...'); —— 它会阻塞 CSS 解析，延迟整个样式表应用，比 慢一个渲染周期。
字体子集和字重按需加载
默认加载全部字重和 Unicode 范围，体积动辄 200KB+。实际项目往往只用 400/500/600 三个字重 + 拉丁字符：
- 加
&subset=latin可砍掉西里尔、希腊、中文等无用字形 - 明确列出需要的字重，比如
family=Inter:wght@400;500;600，别写wght@all - 如果只在标题用粗体，正文用常规体，就分开引入两套
，利用浏览器并发加载能力
字体文件本身没法压缩，但减少字符集和字重是唯一直观有效的体积控制手段。
真正影响首屏性能的不是“有没有用谷歌字体”，而是连接建立时机、字体加载策略、以及是否把用户根本看不到的字符也一起下了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
