Font Loading 缓存策略与 font-display 协同实践

概述字体加载影响首屏与可读性。本文给出 `font-display` 设置与前端缓存协同。CSS 与 HTML 设置@font-face { font-family: 'Inter'; src: url('/fonts/inter.woff2') format('woff2'); font-display: swap; } <link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin> SW 缓存示例self.addEventListener('fetch', event => { if (event.request.destination === 'font') { event.respondWith((async () => { const cache = await caches.open('font-v1'); const cached = await cache.match(event.request); if (cached) return cached; const res = await fetch(event.request); await cache.put(event.request, res.clone()); return res; })()); } });