先确认是404路径错误还是cors跨域问题：404需核对字体物理路径与css中url一致，cors报错则因服务器缺失access-control-allow-origin响应头；推荐用根路径如"/src/assets/fonts/iconfont.woff2"并配font-display:swap。
字体文件 404 或 CORS 报错，先确认是路径问题还是跨域策略问题
直接复制 iconfont.cn 下载页给的 @font-face 代码大概率会失败——不是你写错了，而是下载包里的 CSS 默认用的是相对路径（如 url("iconfont.woff2")），而你把它放进了 src/assets/fonts/ 目录后，CSS 文件所在位置变了，相对路径就断了。浏览器控制台看到 Failed to load resource: the server responded with a status of 404 (Not Found) 或 Access to font at 'xxx' from origin 'xxx' has been blocked by CORS policy，得分开处理。
- 404：说明路径解析失败，检查开发者工具 Network 面板里请求的完整 URL 是否和你存放字体的物理路径一致
- CORS 报错：说明字体文件能访问到，但服务器没返回
Access-Control-Allow-Origin响应头，常见于静态资源托管（如 GitHub Pages、CDN）或本地开发服务器未配 CORS
Vite / Webpack 项目中正确写 @font-face 的 src 路径
不要用 ./iconfont.woff2 这种相对路径，Vite 和 Webpack 对 CSS 里 url() 的解析逻辑和 HTML 不同，容易出错。推荐统一用从 src 根目录开始的路径：
@font-face {
font-family: "iconfont-ali";
src: url("/src/assets/fonts/iconfont.woff2") format("woff2"),
url("/src/assets/fonts/iconfont.woff") format("woff"),
url("/src/assets/fonts/iconfont.ttf") format("truetype");
font-display: swap;
}
- 注意开头的
/：表示从 public 目录（Vite）或 webpack output.publicPath（Webpack）根开始找，确保字体文件实际放在public/src/assets/fonts/或已配置为静态资源目录 - 每个
url()后必须跟format("xxx")，漏掉 Safari 和旧 Edge 会跳过该格式 -
font-display: swap必须加，否则字体加载慢时文字会长时间空白
跨域字体被拦截，三种可落地的解法
如果字体文件托管在另一个域名（比如 CDN 或 OSS），且无法改服务器响应头，别硬扛 CORS —— 换方案更省事：
-
转 base64 内联：用 transfonter.org 上传字体包，勾选 “Base64 encode”，生成的 CSS 里
src就是url(data:font/woff2;base64,...)，彻底绕过跨域 -
服务端配 CORS 头：如果你控制字体所在服务器（如 Nginx），加这段配置：
location ~* \.(woff2|woff|ttf|eot|svg)$ { add_header Access-Control-Allow-Origin *; } -
代理转发（仅开发环境）：Vite 中在
vite.config.ts加 proxy，把/fonts/请求代理到目标域名，避免浏览器报跨域
为什么本地开发时字体总不生效？重点查这三处
很多人卡在“明明路径对了，字体就是不显示”，往往败在细节：
-
font-family名称不一致：CSS 里声明的是"iconfont-ali"，但伪元素里写成content: "\e601"; font-family: "iconfont"—— 名称必须完全匹配，包括引号和大小写 - MIME 类型错误：某些静态服务器（如 Python SimpleHTTPServer）不识别
.woff2，返回text/plain，浏览器直接拒收；换成 Vite / Webpack dev server 或配好 Nginx 的types段可解决 - 缓存导致旧 CSS 生效：字体文件更新了，但浏览器还在用带旧路径的 CSS 缓存，强制刷新（Ctrl+Shift+R）或清空 Network 缓存再试
真正麻烦的不是写几行 @font-face，而是字体路径、服务器策略、构建工具解析逻辑、浏览器兼容性这四层叠加在一起时，一个点没对，整个图标就消失。每次遇到先看 Network 请求状态码和响应头，比猜快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
