Question

我正在构建一个预先的PWA应用程序，不知道是否应该将字体保留在外部以减小应用程序的大小，还是将字体保留在本地以改善脱机查看？最佳做法是什么？

Answer 1

我认为使用由第三方或第一方托管的网络字体不会因您的要求而有所不同。可以在服务工作者中使用Cache Storage API来缓存一般的第一方或第三方请求，包括Web字体请求，并在脱机时利用那些缓存的资源。

有一些加载Web字体的一般最佳实践，Zach Leatherman的this article是我的首选参考书。但是，这些技术并非专门用于构建具有脱机功能的PWA。

Answer 2

首选在文件夹 /fonts/ 中的根网站文件中托管字体文件

我们不得不使用 https://www.dafont.com/ 中的字体，它提供了 .ttf 文件，因此需要使用任何免费的转换器工具将其更改为 .woff 文件，就我而言：https://convertio.co/ttf-woff/ 帮了大忙。

然后在 CSS 中声明新字体并在需要的地方使用：

@font-face {
    font-family: 'Custom Font';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    /* Read next point */
    unicode-range: U+000-5FF;
    /* Download only latin glyphs */
    src:    local('Custom Font'),
            url('/fonts/custom-font.woff') format('woff');
}
h1, h2, h3, h4, h5 {
    font-family: 'Custom Font', 'Helvetica', 'Arial', 'sans-serif';
}

我们的 PWA 需要一个 Service Worker 来本地存储文件以供离线模式使用，因此我们使用 JS 调用 service-worker.js，它位于网站文件的根目录：

// When document is ready.
document.addEventListener('DOMContentLoaded', function () {
    // Steps followed from Google developer codelabs:
    // https://codelabs.developers.google.com/codelabs/offline/#5
    var registerServiceWorker = function registerServiceWorker() {
        if('serviceWorker' in navigator) {
            navigator.serviceWorker.register('/service-worker.js');
        }
    }

    registerServiceWorker();
});

在我们的 /service-worker.js 中，基本网站需要所有这些文件：

self.addEventListener('install', function(e) {
    e.waitUntil(
        caches.open('my-website-name').then(function(cache) {
            return cache.addAll([
                '/',
                '/favicon.ico',
                '/manifest.json',
                '/fonts/custom-font.woff',
                '/images/favicon/android-chrome-192x192.png',
                '/images/favicon/android-chrome-512x512.png',
                '/images/favicon/apple-touch-icon.png',
                '/images/favicon/favicon-16x16.png',
                '/images/favicon/favicon-32x32.png',
                '/images/favicon/maskable_icon.png',
                '/images/favicon/monochrome_icon.png'
            ]);
        })
    );
});
self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches.match(event.request).then(function(response) {
            return response || fetch(event.request);
        })
    );
});

确保对于此 /service-worker.js 文件，您更新 my-website-name，并通过添加您的 PWA 离线正常工作所需的所有其他网站文件来更新 cache.addAll 数组。

这基本上就是为 PWA 加载自定义字体文件的所有代码参考。

PWA最佳实践：Web还是本地字体？

2 个答案: