Three.js FontLoader在iOS设备上无法正常工作问题求助

兄弟，我之前也碰到过类似旧iOS设备上Three.js字体加载卡壳的问题，大概率是老版本Safari的特性限制搞的鬼，给你整理几个针对性的排查和解决方向，应该能搞定：

1. 先检查字体格式是否兼容 #

iPhone5/6对应的iOS版本大多在iOS 10及以下，这个版本的Safari对字体格式支持很挑——WOFF2格式完全不支持，只认TTF或者WOFF（v1）。如果你的字体文件只有WOFF2，那肯定加载不出来。

• 建议用字体转换工具把字体转成TTF+WOFF的组合，FontLoader会自动识别并加载兼容的格式。

2. 确认CORS配置没踩坑 #

老iOS Safari对跨域资源的检查比安卓严格得多，哪怕是同域名下的资源，也可能因为缺少CORS响应头导致请求卡住：

• 先确认服务器返回字体文件时，响应头里有Access-Control-Allow-Origin: *（或者你的具体域名）
• 另外，给FontLoader加上跨域配置，修改你的代码：

  // 在调用load之前添加这行
  this.FontLoader.crossOrigin = 'anonymous';
  

3. 换用Fetch替代默认的XHR加载 #

有些旧iOS版本的XMLHttpRequest存在缓存或请求阻塞的bug，你可以手动用Fetch API来加载字体二进制数据，再交给FontLoader解析，绕开XHR的问题：

loadFont() {
  return new Promise((resolve, reject) => {
    fetch(fontParams.url, {
      method: 'GET',
      mode: 'cors'
    })
    .then(response => {
      if (!response.ok) throw new Error('Font fetch failed');
      return response.arrayBuffer();
    })
    .then(buffer => {
      // 用FontLoader解析二进制数据
      const font = this.FontLoader.parse(buffer);
      this.font = font;
      this.createTextMaterials();
      this.createNumberList();
      resolve(font);
    })
    .catch(err => {
      console.error('Font load error:', err);
      reject(err);
    });
  });
}

4. 排查HTTPS和缓存问题 #

• 旧iOS Safari对HTTP资源的拦截越来越严，如果你的页面是HTTPS，字体资源必须也是HTTPS，否则直接被拦截。
• 试试给字体URL加个随机参数，强制禁用缓存，比如fontParams.url + '?v=' + Date.now()，避免老设备的过期缓存导致请求异常。

5. 用Safari远程调试抓请求细节 #

要是以上方法都不行，就得搞清楚请求到底卡在哪个环节了：

1. 在iPhone上打开「设置」→「Safari浏览器」→「高级」→开启「Web检查器」
2. 用数据线连到Mac，打开Mac上的Safari，顶部菜单点「开发」→找到你的设备→选对应的页面
3. 切换到「网络」面板，看字体请求的状态码、响应头，到底是请求发不出去，还是响应有问题，一目了然。

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