SAPUI5自定义图标加入IconPool后IE11偶发不显示问题求助

这确实是IE11处理自定义字体图标时的已知兼容性问题，核心原因是IE11对字体加载与DOM初始化的时序处理和Chrome、Firefox等现代浏览器存在差异。结合你提到的「字体详情硬编码在页面JSON变量」的实现方式，问题本质是：当IconPool基于页面JSON初始化图标时，对应的字体文件可能还未完成加载，IE11不会自动触发图标元素的重绘，导致图标无法显示；而刷新后字体已被浏览器缓存，初始化时字体已就绪，所以能正常显示。

下面是几个经过验证的修复方案，按优先级推荐：

1. 延迟IconPool初始化，确保字体加载完成后再执行 #

这是最彻底的解决方案，通过检测字体是否加载完成，再触发IconPool的初始化逻辑。你可以通过创建隐藏测试元素，监听其尺寸变化来判断字体是否就绪（字体加载前后，相同字符的渲染尺寸会变化）：

function waitForCustomFont(fontFamily, callback) {
  // 创建隐藏测试元素，使用目标字体和一个图标字符
  const testSpan = document.createElement('span');
  testSpan.style.cssText = `
    position: absolute;
    visibility: hidden;
    font-family: ${fontFamily};
    font-size: 20px;
  `;
  // 替换成你字体库中存在的任意图标Unicode字符
  testSpan.textContent = '\ue001';
  document.body.appendChild(testSpan);

  const initialWidth = testSpan.offsetWidth;
  // 定时检查尺寸变化
  const checkTimer = setInterval(() => {
    const currentWidth = testSpan.offsetWidth;
    if (currentWidth !== initialWidth) {
      clearInterval(checkTimer);
      document.body.removeChild(testSpan);
      callback();
    }
  }, 50);

  // 超时兜底，避免无限等待
  setTimeout(() => {
    clearInterval(checkTimer);
    document.body.removeChild(testSpan);
    callback();
  }, 3000);
}

// 调用示例：替换成你的自定义字体族名称，再初始化IconPool
waitForCustomFont('YourIconFontFamily', () => {
  IconPool.init(yourFontJSONVariable);
});

2. 初始化后强制触发图标元素重绘 #

如果无法修改IconPool的初始化时机，可以在初始化完成后，手动触发IE11的重绘逻辑，让浏览器重新渲染图标元素：

// 假设你的图标元素有统一的类名，比如.icon-pool-item
const iconElements = document.querySelectorAll('.icon-pool-item');
iconElements.forEach(el => {
  // 通过临时修改display属性触发重排重绘
  el.style.display = 'none';
  // 读取offsetHeight强制浏览器计算布局
  void el.offsetHeight;
  el.style.display = '';
});

3. 优化字体加载优先级 #

通过调整页面资源加载顺序，让浏览器尽早加载字体文件，减少初始化时字体未就绪的概率：

• 将@font-face的定义放在页面<head>的最顶部，确保浏览器最先解析字体规则
• 添加<link rel="preload">标签预加载字体文件（IE11不支持该属性，但不会报错，对现代浏览器友好）：

  <link rel="preload" href="your-custom-icon-font.woff2" as="font" type="font/woff2" crossorigin>
  

以上方案都能有效解决IE11中自定义图标首次加载不显示的问题，优先推荐方案一，从根源上避免时序冲突。

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