JS字体加载完成触发4个回调方法

来到golang学习网的大家，相信都是编程学习爱好者，希望在这里学习文章相关编程知识。下面本篇文章就来带大家聊聊《JS检测字体加载完成并触发4个回调函数的方法，通常可以通过 FontFace API 结合 Promise 实现。以下是实现方式和代码示例：✅ 一、使用 FontFace API 检测字体加载const font = new FontFace('MyCustomFont', 'url("font.woff2")'); font.load().then(function (loadedFont) { // 字体加载成功 document.fonts.add(loadedFont); console.log('字体加载完成'); callback1(); callback2(); callback3(); callback4(); }).catch(function (err) { console.error('字体加载失败:', err); });✅ 二、结合 document.fonts.ready 等待所有字体加载完成如果你有多个字体或需要等待所有字体加载完成后再执行操作：document.fonts.ready.then(() => { console.log('所有字体加载完成'); callback1(); callback2(); callback3(); callback4(); });✅ 三、完整示例（包含4个回调函数） function callback1() { console.log('回调1：字体加载完成'); } function callback2() { console.log('回调2：字体加载完成'); } function callback3() { console.log('回调3：字体加载完成'); } function callback4》，介绍一下，希望对大家的知识积累有所帮助，助力实战开发！

处理字体加载失败的方法包括：1. 设置超时时间，通过 FontFaceObserver 的超时参数确保长时间未加载时触发失败回调；2. 使用 CSS 设置备用字体以保证内容可读性；3. 在失败回调中加入重试机制，并限制最大重试次数防止无限循环；4. 提示用户刷新页面或检查网络连接。此外，优化字体加载性能可通过使用 WOFF2 格式、字体子集化、CDN 托管、预加载字体文件以及合理设置 font-display 属性避免 FOIT 和 FOUT 问题。浏览器对 FontFace API 支持良好，现代浏览器均可使用，而老浏览器需降级处理。综合运用 FontFaceObserver 及相关策略可有效提升字体加载的稳定性和用户体验。

JS检测字体加载完成，核心在于利用浏览器的字体加载API，并结合回调函数，确保在字体可用后才进行渲染，避免出现“闪烁”或排版错乱。关键点在于FontFaceObserver或类似库的使用，以及对不同浏览器兼容性的处理。

// 假设你已经引入了 FontFaceObserver 库

function detectFontLoad(fontFamily, successCallback, loadingCallback, activeCallback, inactiveCallback) {
  const font = new FontFaceObserver(fontFamily);

  font.load().then(function () {
    console.log(fontFamily + ' 加载成功');
    if (successCallback) successCallback();
    if (activeCallback) activeCallback(); // 触发 active 回调，表示字体已成功加载并激活
  }, function () {
    console.log(fontFamily + ' 加载失败');
    if (inactiveCallback) inactiveCallback(); // 触发 inactive 回调，表示字体加载失败
  });

  if (loadingCallback) loadingCallback(); // 立即触发 loading 回调，表示字体开始加载
}

// 使用示例
detectFontLoad('MyCustomFont',
  function() {
    // 字体加载成功后的处理
    document.body.classList.add('fonts-loaded'); // 添加一个 class，通过 CSS 控制渲染
  },
  function() {
    // 字体开始加载
    console.log('字体开始加载...');
  },
  function() {
    // 字体已激活（成功加载并应用）
    console.log('字体已激活！');
  },
  function() {
    // 字体加载失败
    console.error('字体加载失败！');
  }
);

// CSS 示例 (配合 JS)
/*
body {
  font-family: sans-serif; // 默认字体
}

body.fonts-loaded {
  font-family: 'MyCustomFont', sans-serif; // 替换为自定义字体
}
*/

如何处理字体加载失败的情况？

字体加载失败是真实存在的，网络不稳定、字体文件损坏都可能导致失败。不能仅仅依赖于成功加载的回调。

1. 设置超时: FontFaceObserver 允许设置超时时间。超过这个时间，即使字体没有加载完成，也会触发失败回调。
2. 回退字体: 在 CSS 中，始终设置一个备用字体。如果自定义字体加载失败，浏览器会自动使用备用字体，保证内容的可读性。
3. 重试机制: 可以尝试在失败回调中重新加载字体。但要注意避免无限循环，可以设置最大重试次数。
4. 用户提示: 如果字体加载持续失败，可以向用户显示一个提示信息，告知他们可能需要刷新页面或检查网络连接。

// 改进后的 detectFontLoad 函数，增加超时和重试机制
function detectFontLoadWithRetry(fontFamily, successCallback, loadingCallback, activeCallback, inactiveCallback, maxRetries = 3, retryDelay = 1000) {
  let retries = 0;

  function loadFont() {
    const font = new FontFaceObserver(fontFamily);

    font.load(null, 5000).then(function () { // 设置超时时间为 5 秒
      console.log(fontFamily + ' 加载成功');
      if (successCallback) successCallback();
      if (activeCallback) activeCallback();
    }, function () {
      console.warn(fontFamily + ' 加载失败，重试中... (第 ' + (retries + 1) + ' 次)');
      if (retries < maxRetries) {
        retries++;
        setTimeout(loadFont, retryDelay); // 延迟后重试
      } else {
        console.error(fontFamily + ' 加载失败，已达到最大重试次数');
        if (inactiveCallback) inactiveCallback();
      }
    });

    if (loadingCallback && retries === 0) loadingCallback(); // 只在第一次加载时触发 loading 回调
  }

  loadFont();
}

// 使用示例
detectFontLoadWithRetry('MyCustomFont',
  function() { document.body.classList.add('fonts-loaded'); },
  function() { console.log('字体开始加载...'); },
  function() { console.log('字体已激活！'); },
  function() { console.error('字体加载失败！'); }
);

如何优化字体加载性能？

字体加载对网站性能有显著影响，特别是对于移动设备。

1. 使用 Web Font Loader (或类似库): 如 FontFaceObserver，提供更精细的控制和事件监听。
2. 字体格式优化: 使用 WOFF2 格式，压缩率更高，兼容性更好。
3. 字体子集化: 只包含页面实际使用的字符，减少字体文件大小。可以使用工具如 fontmin。
4. CDN 加速: 将字体文件托管在 CDN 上，利用 CDN 的缓存和加速能力。
5. 预加载 (preload): 使用 标签，提前加载字体文件。

<link rel="preload" href="fonts/MyCustomFont.woff2" as="font" type="font/woff2" crossorigin>

6. 避免 FOIT 和 FOUT: FOIT (Flash of Invisible Text) 指字体加载完成前显示空白，FOUT (Flash of Unstyled Text) 指字体加载完成后替换默认字体导致闪烁。通过 CSS 和 JS 的配合，可以尽量避免这两种情况。

不同浏览器对字体加载 API 的支持程度如何？

虽然 FontFaceObserver 这样的库已经做了很好的兼容性处理，但了解底层 API 的支持情况仍然很重要。

1. FontFace API: 现代浏览器都支持 FontFace API，允许通过 JS 加载和控制字体。
2. font-display: CSS font-display 属性控制字体加载期间的行为。swap 值表示先显示备用字体，字体加载完成后再替换。optional 值表示如果字体加载时间过长，则不使用自定义字体。
3. 老的浏览器: 对于不支持 FontFace API 的老浏览器，需要使用一些 hack 的方法，或者直接降级到使用系统字体。但这种情况现在已经很少见了。

总的来说，使用 FontFaceObserver 结合 CSS font-display 属性，可以很好地处理字体加载的各种情况，并提供良好的用户体验。不过，始终要记住，字体加载是性能优化的一个重要方面，需要综合考虑各种因素。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~