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;

})());

}

});