@font-face路径错误导致字体不加载，因url()路径必须相对于CSS文件位置而非HTML；需用Network面板查404、避免中文空格、禁用file://协议、确保format()匹配及font-display生效。
@font-face路径写错导致字体不加载
字体文件明明放对位置，但页面还是用默认字体——八成是url()里的路径错了。浏览器不会报错，只会默默回退，极难察觉。
-
url()路径是相对于当前 CSS 文件的位置，不是 HTML 文件。比如 CSS 在css/style.css，字体在fonts/inter.woff2，就得写url('../fonts/inter.woff2')，不能写url('/fonts/inter.woff2')（除非开了服务器根路径） - 本地开发时别用
file://协议直接双击打开 HTML，跨域限制会让字体加载失败；用npx serve或 VS Code Live Server 启一个本地 HTTP 服务再测 - 路径里别含中文、空格或特殊符号，某些浏览器会直接跳过整个
@font-face块 - 打开 DevTools → Network → 过滤
font，看请求状态：404 就是路径问题，200 但字体没生效，再查 MIME 类型或 CORS
Google Fonts 的 标签漏参数就白引入
复制 Google Fonts 的 标签后，只改了 family 却删了 &display=swap 或字重参数，结果文字卡白屏几秒——这不是加载慢，是配置没配全。
-
&display=swap必须保留在 URL 里，否则浏览器默认等字体加载完成才渲染文本（FOIT），用户看到空白 - 要用粗体或斜体，必须显式加参数，比如
family=Noto+Sans+SC:wght@400;700;italic@400；只写family=Noto+Sans+SC默认只加载 400 normal -
<link>必须放在里，且要在所有用到该字体的 CSS 之前（包括内联<style></style>） - 字体名大小写、空格、引号必须和 Google Fonts 页面上显示的一致，比如
"Noto Sans SC"不能写成noto sans sc或NotoSansSC
font-display: swap 不是加了就完事
font-display: swap 写在 @font-face 里才生效，写在 font-family 或其他地方完全无效。而且它只解决“是否显示备用字体”，不解决“布局偏移”。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 每个
@font-face块都得单独写font-display: swap，不能只在第一个里写 - 它会让浏览器先用 fallback 字体撑开布局，等自定义字体加载完再替换——这可能引发 FOUT（Flash of Unstyled Text），比如行高突变、换行点移动
- 如果字体是图标字体或装饰性标题，可考虑
font-display: optional，加载慢就放弃，避免干扰首屏内容 -
<link rel="preload">配合font-display: swap才有意义；单用swap只是让体验“可接受”，不加快实际加载
预加载字体 link rel="preload" 容易断链
写了 <link rel="preload" as="font"> 却没生效？大概率是 href 路径、crossorigin 或 MIME type 和 @font-face 中的 src 对不上。
立即学习“前端免费学习笔记（深入）”；
-
href必须和@font-face中第一个url()完全一致，包括查询参数（如?v=1.2）、末尾斜杠、大小写 - 必须带
crossorigin属性（值可以是空字符串crossorigin=""），否则即使同域名也会被当作跨域请求拦截 -
type推荐显式写上，比如type="font/woff2"；不写的话某些旧版 Chrome 会降级优先级 - 构建工具（如 Vite/Webpack）自动加 hash 的字体文件，不能手写死
href，得靠插件注入真实路径，否则预加载永远 404
