HTML自定义字体引入_HTML文档@font-face结构写法-html教程-PHP中文网

@font-face 必须置于 css 文件顶部或 html 的标签内，src 路径需相对于 css 文件，font-family 名称须严格匹配大小写与引号，font-weight/font-style 需按变体单独声明。

html自定义字体引入_html文档@font-face结构写法

@font-face 声明必须写在 CSS 文件顶部或

浏览器解析 CSS 时，@font-face 规则必须在首次用到该 font-family 之前被读取，否则会跳过渲染——哪怕你后面写了正确的调用，字体也不会加载。

常见错误是把 @font-face 放在 CSS 文件末尾、或者塞进某个组件 scoped 样式里（如 Vue 的 <style scoped></style>），导致作用域隔离或解析顺序错乱。

✅ 推荐位置：CSS 文件最开头；或 HTML 的中 <style></style> 标签内（非 @import 引入的外部 CSS）
❌ 避免：@import 加载含 @font-face 的 CSS —— 它会阻塞关键渲染路径，且部分浏览器延迟执行
⚠️ 注意：若用构建工具（如 Vite/Webpack），确保字体路径没被误处理；比如 Vite 默认不处理 url('./fonts/xxx.woff2') 中的相对路径，需确认是否启用 assetsInlineLimit 或正确配置 public 目录

src 路径必须相对于 CSS 文件，不是 HTML 或根目录

这是 80% 字体不生效的根源。浏览器计算 url() 时，基准点永远是当前 CSS 文件所在位置，不是你打开的 HTML 页面，也不是服务器根路径。

比如你的 CSS 在 /css/main.css，字体文件放在 /fonts/inter.woff2，那 src 必须写成 url('../fonts/inter.woff2')，而不是 url('/fonts/inter.woff2') 或 url('fonts/inter.woff2')。

Pptx To Html

使用 MinerU 将 PowerPoint (.pptx) 演示文稿转换为 HTML，保留幻灯片内容与结构，生成可直接在网页使用的 HTML格式。

下载

✅ 正确示例：@font-face { font-family: 'Inter'; src: url('../fonts/inter.woff2') format('woff2'); }
❌ 错误写法：url('/fonts/inter.woff2')（绝对路径易触发 CORS）、url('fonts/inter.woff2')（路径相对于 HTML 当前 URL）
? 验证方法：打开 DevTools → Network → Filter “Font”，看请求 URL 是否和实际文件位置一致；404 就立刻核对相对路径

font-family 名称大小写+引号必须完全一致

浏览器对 font-family 是严格字符串匹配。声明时用了 'HarmonyOS Sans'，调用时写 font-family: HarmonyOS Sans（无引号）或 'harmonyos sans'（小写），就等于没声明。

中文字体名、带空格、连字符、数字的字体名，必须用英文单引号或双引号包裹；且引号类型和大小写要和 @font-face 块里一模一样。

✅ 正确：@font-face { font-family: 'Zhi Mang Xing'; ... } + body { font-family: 'Zhi Mang Xing', sans-serif; }
❌ 错误：font-family: Zhi Mang Xing;（无引号）、font-family: "zhi mang xing";（小写）、font-family: ‘Zhi Mang Xing’;（中文引号）
? 提示：用 CSS 变量统一管理族名可减少拼错风险，例如 :root { --font-main: 'Inter Variable'; }，然后写 font-family: var(--font-main), sans-serif;

font-weight / font-style 不匹配会导致静默回退

浏览器不会“智能加粗”一个 normal 权重的字体文件。如果你只声明了 font-weight: 400 的常规体，但页面里有个 <strong></strong> 默认是 font-weight: 700，而你没提供对应粗体的 @font-face 块，它就会直接切到 sans-serif，连警告都不报。

✅ 正确做法：每个需要的变体单独声明一个 @font-face 块

@font-face { font-family: 'MyFont'; font-weight: 400; src: url('./fonts/myfont-regular.woff2') format('woff2'); }<br>@font-face { font-family: 'MyFont'; font-weight: 700; src: url('./fonts/myfont-bold.woff2') format('woff2'); }

✅ 同理，斜体也要单独声明：font-style: italic，不能指望浏览器模拟
⚠️ 注意：font-weight 推荐用数值（如 400、700），避免用 normal/bold —— 它们只是别名，不同浏览器映射可能不一致