处理字体加载失败的方法包括：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; // 替换为自定义字体
}
*/
如何处理字体加载失败的情况？
字体加载失败是真实存在的，网络不稳定、字体文件损坏都可能导致失败。不能仅仅依赖于成功加载的回调。
- 设置超时: FontFaceObserver 允许设置超时时间。超过这个时间，即使字体没有加载完成，也会触发失败回调。
- 回退字体: 在 CSS 中，始终设置一个备用字体。如果自定义字体加载失败，浏览器会自动使用备用字体，保证内容的可读性。
- 重试机制: 可以尝试在失败回调中重新加载字体。但要注意避免无限循环，可以设置最大重试次数。
- 用户提示: 如果字体加载持续失败，可以向用户显示一个提示信息，告知他们可能需要刷新页面或检查网络连接。
// 改进后的 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('字体加载失败！'); }
);
如何优化字体加载性能？
字体加载对网站性能有显著影响，特别是对于移动设备。
- 使用 Web Font Loader (或类似库): 如 FontFaceObserver，提供更精细的控制和事件监听。
- 字体格式优化: 使用 WOFF2 格式，压缩率更高，兼容性更好。
-
字体子集化: 只包含页面实际使用的字符，减少字体文件大小。可以使用工具如
fontmin。 - CDN 加速: 将字体文件托管在 CDN 上，利用 CDN 的缓存和加速能力。
-
预加载 (preload): 使用
标签，提前加载字体文件。
- 避免 FOIT 和 FOUT: FOIT (Flash of Invisible Text) 指字体加载完成前显示空白，FOUT (Flash of Unstyled Text) 指字体加载完成后替换默认字体导致闪烁。通过 CSS 和 JS 的配合，可以尽量避免这两种情况。
不同浏览器对字体加载 API 的支持程度如何？
虽然 FontFaceObserver 这样的库已经做了很好的兼容性处理，但了解底层 API 的支持情况仍然很重要。
-
FontFace API: 现代浏览器都支持
FontFaceAPI，允许通过 JS 加载和控制字体。 -
font-display: CSS
font-display属性控制字体加载期间的行为。swap值表示先显示备用字体，字体加载完成后再替换。optional值表示如果字体加载时间过长，则不使用自定义字体。 -
老的浏览器: 对于不支持
FontFaceAPI 的老浏览器，需要使用一些 hack 的方法，或者直接降级到使用系统字体。但这种情况现在已经很少见了。
总的来说，使用 FontFaceObserver 结合 CSS font-display 属性，可以很好地处理字体加载的各种情况，并提供良好的用户体验。不过，始终要记住，字体加载是性能优化的一个重要方面，需要综合考虑各种因素。
