JS怎样检测字体加载完成 4个回调函数确保字体加载后渲染

// 假设你已经引入了 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; // 替换为自定义字体
}
*/

// 改进后的 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('字体加载失败！'); }
);

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