@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 或直接静默忽略。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• src 要按兼容性从高到低排列，例如：url('./fonts/inter-bold.woff2') format('woff2'), url('./fonts/inter-bold.woff') format('woff')
• 确保 Web 服务器对 .woff2 返回 font/woff2 MIME 类型，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 动态加载。