Angular 11+中iOS-Edge-Line图标随机加载失败显示乱码问题求助

我们在 Angular 11+ 项目中使用 iOS-Edge-Line 图标库，该库多数情况下运行正常，但随机在页面加载或刷新时，图标位置会显示乱码字符而非正常图标。

示例截图：

当前图标库导入代码如下：

图标样式定义 #

[class^='icon-'],
[class*=' icon-'] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'iOS-Edge-Line' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-D-Cube:before {
  content: '\e901';
}

字体文件导入 #

@font-face {
  font-family: 'iOS-Edge-Line';
  src: local('iOS-Edge-Line'), url('/assets/fonts/iOS-Edge-Line.eot'),
    url('/assets/fonts/iOS-Edge-Line.eot?#iefix') format('embedded-opentype'),
    url('/assets/fonts/iOS-Edge-Line.ttf') format('truetype'),
    url('/assets/fonts/iOS-Edge-Line.woff') format('woff'),
    url('/assets/fonts/iOS-Edge-Line.svg?#iOS-Edge-Line') format('svg');
  font-weight: normal;
  font-style: normal;
  unicode-range: U+0901-EDAF;
}

可行解决方案 #

• 优化字体加载逻辑
  浏览器加载字体时的竞态条件可能导致样式先生效但字体未加载完成，调整@font-face的资源顺序，优先加载体积更小、加载更快的woff格式，并添加font-display: swap确保字体加载前用系统字体占位，避免乱码：

  @font-face {
    font-family: 'iOS-Edge-Line';
    src: local('iOS-Edge-Line'),
         url('/assets/fonts/iOS-Edge-Line.woff') format('woff'),
         url('/assets/fonts/iOS-Edge-Line.ttf') format('truetype'),
         url('/assets/fonts/iOS-Edge-Line.eot') format('embedded-opentype'),
         url('/assets/fonts/iOS-Edge-Line.svg?#iOS-Edge-Line') format('svg');
    font-weight: normal;
    font-style: normal;
    unicode-range: U+0901-EDAF;
    font-display: swap;
  }
  

• 确认Angular资源打包配置
  检查angular.json的assets配置，确保字体文件被正确纳入打包范围，避免路径错误导致加载失败：

  "assets": [
    "src/favicon.ico",
    "src/assets",
    {
      "glob": "**/*",
      "input": "src/assets/fonts/",
      "output": "/assets/fonts/"
    }
  ]
  

  建议使用相对路径或配合Angular的baseHref配置，避免绝对路径在不同环境下的适配问题。

• 排查网络与缓存问题
  随机加载失败可能是字体文件请求超时或缓存异常导致。可通过浏览器开发者工具的Network面板查看字体请求状态，若存在404或加载失败情况，可给字体文件添加版本号强制浏览器刷新缓存：

  url('/assets/fonts/iOS-Edge-Line.woff?v=1.0') format('woff')
  

• 验证unicode-range范围
  确认图标使用的字符码（如示例中的\e901）在unicode-range: U+0901-EDAF范围内，后续新增图标时也需确保对应字符码在该区间内，否则浏览器会跳过字体加载。

内容的提问来源于stack exchange，提问作者Sander Yazıcıoğlu