Icon Font 图标不显示怎么办？

这问题我遇到过，大概率是字体文件打包路径问题。本地开发时相对路径能访问到，但线上部署后路径变了。

试试把路径改成绝对路径，复制这个：

@font-face {

  font-family: 'MyIcons';

  src: url('/fonts/myicons.woff2') format('woff2'),

       url('/fonts/myicons.woff') format('woff');

  font-weight: normal;

  font-style: normal;

  font-display: swap;

}

如果还不行，看看是不是这几个原因：
1. 服务器没配置woff/woff2的MIME类型
2. 字体文件没被打包进去（检查打包工具配置）
3. CORS问题（如果部署在不同域名）

最土的办法是把字体文件base64编码直接写进CSS里，虽然丑但肯定能显示：

@font-face {

  font-family: 'MyIcons';

  src: url('data:application/font-woff2;base64,这里是base64编码') format('woff2');

}

这个问题我太熟悉了，本地好好的线上崩了，十有八九是字体文件没被正确打包带走，或者路径在构建后失效了。

你现在的写法 src: url('./fonts/myicons.woff2') 用的是相对路径，但 Webpack 这类工具打包时，./fonts/ 这个路径会变成相对于当前 CSS 文件的路径，而 CSS 文件本身可能被抽离到 /static/css/xxx.css，结果字体文件请求路径就变成 /static/css/fonts/myicons.woff2，但你的字体其实根本不在那。

最简单的办法是把字体文件放在 public 目录下（比如 public/fonts/myicons.woff2），然后在 CSS 里用绝对路径：

src: url('/fonts/myicons.woff2') format('woff2')

或者如果你用的是 Webpack，可以配置 asset/resource 或 file-loader，把字体文件打到 /static/fonts/ 下，然后对应改路径，记得打包后检查下 dist 目录里字体文件到底在哪儿，别光看浏览器 Network 面板里显示 200 就完事——有时候 200 是个假 200，返回了个 404 的 HTML 页面（比如 SPA 的 index.html），浏览器就傻傻当字体用了。

另外记得检查下服务器有没有配置正确的 Content-Type 和 CORS 头，虽然你提到文件加载了，但偶尔 Nginx 没加 font/woff2 的 MIME 类型也会导致静默失败。还有跨域的话，记得加 Access-Control-Allow-Origin，不过本地开发没问题的话大概率不是这个原因。

最后提一嘴，font-display: swap 只影响加载策略，不解决加载失败的问题，别被它迷惑了。