处理字体加载失败的方法包括：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: 现代浏览器都支持 FontFace API，允许通过 JS 加载和控制字体。font-display: CSS font-display 属性控制字体加载期间的行为。swap 值表示先显示备用字体，字体加载完成后再替换。optional 值表示如果字体加载时间过长，则不使用自定义字体。老的浏览器: 对于不支持 FontFace API 的老浏览器，需要使用一些 hack 的方法，或者直接降级到使用系统字体。但这种情况现在已经很少见了。
总的来说，使用 FontFaceObserver 结合 CSS font-display 属性，可以很好地处理字体加载的各种情况，并提供良好的用户体验。不过，始终要记住，字体加载是性能优化的一个重要方面，需要综合考虑各种因素。
以上就是JS怎样检测字体加载完成 4个回调函数确保字体加载后渲染的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/160421.html
微信扫一扫 
支付宝扫一扫 
