移动端预加载字体为何导致页面闪烁？检查 crossorigin 属性
浏览器在预加载字体时若未正确设置跨域凭证模式，会触发双重请求导致页面闪烁，需在标签中添加 crossorigin 属性。
检查预加载标签是否设置了跨域凭证模式
浏览器在解析 <link rel='preload'> 标签时，若未指定跨域凭证模式，可能会发起额外的请求以获取正确的凭证。例如，当预加载跨域字体资源时，浏览器默认不会携带凭证，导致后续页面渲染时再次请求。为避免这种情况，需在标签中添加 crossorigin 属性，明确告知浏览器使用正确的凭证模式。具体操作时，应检查所有预加载字体资源的标签，确保包含 crossorigin 属性，如 <link rel='preload' href='font.woff2' as='font' crossorigin />。
若标签中缺少 crossorigin 属性，浏览器可能无法正确处理跨域资源的凭证，导致预加载结果无法直接用于当前页面，从而触发重复请求。验证时，可在开发者工具的 Network 面板中查看字体请求的状态，若发现请求状态为 'pending' 或重复请求，说明凭证模式配置错误。此时应修改标签，添加 crossorigin 属性，并重新加载页面，检查是否仍有重复请求。
验证浏览器是否正确缓存预加载的字体资源
浏览器在处理 <link rel='preload'> 时，会将下载的字体资源存储在当前文档的内存缓存中，以便立即使用。若预加载标签未设置跨域凭证模式，浏览器可能无法将资源正确映射到内存缓存，导致后续渲染时重新请求。验证时，可在代码中尝试访问预加载的字体，看是否能立即渲染。若字体未立即显示或触发新的网络请求，说明预加载未生效。
若在 Network 面板中看到字体请求的状态为 '200 (from disk cache)' 或 '200 (from memory cache)'，且无重复请求，说明预加载成功。反之，若状态显示为 'pending' 或出现重复请求，说明凭证模式配置错误。此时应重新检查标签中的 crossorigin 属性，确保其与跨域资源的凭证要求一致。
确认浏览器对跨域预加载资源的凭证处理机制
浏览器在预加载跨域资源时，会根据标签中的凭证模式决定是否携带凭证。若未指定 crossorigin 属性，浏览器可能默认不携带凭证，导致预加载结果无法直接用于当前页面，从而触发重复请求。根据资料，浏览器在预加载字体时，若未设置正确的凭证模式，可能会发起额外的请求以获取正确的凭证。因此，理解浏览器的凭证处理机制是避免重复请求的关键。
开发者应充分利用浏览器的凭证处理机制，确保预加载标签中的 crossorigin 属性与跨域资源的凭证要求一致。只需在预加载标签中添加 crossorigin 属性，即可避免浏览器因凭证模式不匹配而发起额外的请求。验证时，可在 Network 面板中查看字体请求的状态，若无重复请求且状态为缓存命中，说明凭证模式配置正确。
排查预加载标签与跨域资源路径的凭证模式差异
预加载标签中的 crossorigin 属性必须与跨域资源的凭证要求一致，否则可能导致预加载结果无法直接使用。路径差异可能包括协议（http vs https）、域名或文件扩展名，但凭证模式的不匹配更为关键。例如，若跨域资源要求凭证，而预加载标签未设置 crossorigin 属性，浏览器可能无法正确处理资源。
具体排查步骤是，在代码中找到所有预加载的跨域字体资源，检查其标签中的 crossorigin 属性。若发现缺少 crossorigin 属性，应统一修改。例如，将 crossorigin 属性添加到所有预加载标签中，确保其与跨域资源的凭证要求一致。验证时，重新加载页面，检查 Network 面板中字体请求的状态，若无重复请求且状态为缓存命中，说明凭证模式配置正确。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。