css如何在HTML中引用外部字体_通过@font-face和link引入字体-css教程

自定义字体路径应相对于CSS文件而非HTML；@font-face需优先woff2、加font-display:swap；Google Fonts的必须含rel=”stylesheet”且display=swap；font-family名称须逐字匹配；file://协议下字体因CORS被阻，需本地服务器或改用CDN。

用 @font-face 引入自定义字体时，src 路径写错最常见

本地字体文件（如 fonts/Roboto-Regular.woff2）的路径是相对于 CSS 文件位置计算的，不是 HTML 文件。很多人把路径写成相对于 HTML 的，结果浏览器 404 报错：Failed to load resource: the server responded with a status of 404 ()。

实操建议：

• 把字体文件放在和 CSS 文件同级或子目录下，比如 css/style.css 和 css/fonts/xxx.woff2
• src 中优先写 woff2（体积小、兼容现代浏览器），再 fallback 到 woff 或 truetype
• 务必加 font-display: swap，避免文字长时间空白（FOIT）

示例：

@font-face {
  font-family: 'MyFont';
  src: url('fonts/MyFont.woff2') format('woff2'),
       url('fonts/MyFont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

引入 Google Fonts 时，rel="stylesheet" 不可省略

Google Fonts 提供的 标签本质是加载一个 CSS 文件，里面已经写了 @font-face 规则。如果漏掉 rel="stylesheet"，浏览器不会当作样式表解析，字体不会生效。

立即学习“前端免费学习笔记（深入）”；

常见错误写法：（缺 rel）

正确写法：

注意点：