如何通过@font-face语句在CSS中成功引入并使用自定义字体？

本文共计1136个文字，预计阅读时间需要5分钟。

在CSS中使用 `@font-face` 声明字体，是跨浏览器支持自定义字体最可靠的方式。关键不在于写了就行，而是字体格式、路径、font-weight 和 font-style 必须与实际使用时严格匹配，否则浏览器可能会忽略或回退到系统字体。

常见错误：只引入 .ttf，结果 Safari 14+ 或旧版 Edge 不识别；或者 font-weight: 600 声明了，但字体文件本身不包含半粗体字重，导致渲染为普通加粗（伪粗体），失真严重。

• 优先提供 .woff2（现代浏览器） + .woff（兼容老 Chrome/Firefox） + .ttf（Safari 旧版、Android Webview）组合
• src 中多个 url() 用逗号分隔，浏览器按顺序尝试，遇到第一个能加载的就停
• font-display: swap 必须加上，避免文字长时间空白（FOIT）；不用 block 或默认值
• 字体名用英文引号包裹，如 font-family: 'MyCustomFont'，且声明和使用时名称必须完全一致（区分大小写）

字体文件路径怎么写才不会 404

路径错误是 @font-face 失效最常见原因。CSS 文件里的 url() 是相对于该 CSS 文件的位置解析的，不是相对于 HTML 页面。