FontAwesome使用fa-regular时font-weight异常问题求助

以下是针对Chrome 115/117及Edge浏览器中，Font Awesome Regular图标显示方块、低字重（<600）无法生效的解决方案：

• 确认Font Awesome资源引入完整
  如果使用CDN引入，需确保同时包含Regular样式的资源。比如替换成包含所有样式的CDN链接：

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  

  若单独引入，需补充Regular对应的CSS文件：

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/regular.min.css">
  

  注意替换为你实际使用的Font Awesome版本号。

• 强制指定字体族与字重
  给.fa-regular类添加强制CSS规则，避免样式被继承或覆盖：

  .fa-regular {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
  }
  

  字体族名称需与你使用的Font Awesome版本匹配，比如v5版本对应"Font Awesome 5 Free"。

• 清除浏览器缓存并检查资源加载

  1. 用Ctrl+Shift+R强制刷新页面，清除旧缓存；
  2. 打开开发者工具的Network面板，过滤字体文件（.woff2/.woff），确认Font Awesome的Regular字体文件已成功加载，无404或加载失败情况。

• 排查样式冲突

  1. 检查全局CSS是否存在强制设置font-weight: 600的规则，比如* { font-weight: 600 !important; }这类会覆盖图标字重的代码；
  2. 在开发者工具的Elements面板中查看.fa-regular元素的computed样式，确认font-weight是否被其他规则篡改。

• 本地引入Font Awesome资源
  若CDN存在加载问题，可下载Font Awesome完整包到本地，确保CSS文件与字体文件路径对应，避免网络或地域导致的资源加载异常。

内容的提问来源于stack exchange，提问作者KaptainM