for字体作为本地字体的后盾

Question

我有一个关于网络字体的问题，以及它们是如何加载的。问题是，我必须用卡利布里字体。这是一种普通的窗口字体。

所以字体堆栈可以是这样的：

font-family: Calibri, Candara, Arial, sans-serif;

然而，有一个网站字体的卡利，但它是相当昂贵的。所以我的想法是像这样构建字体堆栈：

font-family: Calibri, 'Calibri', Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;

所以第一种字体应该是本地字体，第二种字体是网页字体。因此，如果找不到本地字体，它会加载网页字体。

字体定价为xxx视图。问题是，这是否有效，如果是的话，这会为我节省一些字体加载吗？

Answer 1

不幸的是，这不是CSS的工作方式。为了实现网页字体，您首先需要将它包含在您的网站中(通过HTML <link>、CSS @import或通过JavaScript)。

这意味着在您的font-family声明之前，字体已经被加载了(并且可能被托管字体的公司计算为视图)。

一种解决方案可能是检测浏览器默认情况下是否能够加载卡利字体(使用JavaScript)，如果没有，则下载网页字体并使用该字体，但在这样做时，您将创建一种特殊的用户体验，根据这种体验，页面将默认使用可以加载的字体，然后更改网页字体(在JavaScript加载之后，您的CSS已经启动)。

如果您愿意沿着这条路径走下去，有几个主题涉及如何检测通过JavaScript加载的字体，例如检测网页中使用的字体。

Answer 2

使用web字体作为本地字体的后盾的方法是使用@font-face规则创建别名：

@font-face {
  font-family: Calibri;
  src: local(Calibri),
       url(Calibri.woff) format("woff");
}

font-family: Calibri, Candara, Arial, sans-serif;

这种方法比给web字体提供一个不同的名称更好，并且在您的字体堆栈中都包含了这两个名称，这可能导致有时在不需要时下载web字体。通过移到@font-face规则，如果在用户的系统上找到了杯标的本地安装，就不会下载web字体。

(我知道你最初的问题涉及到其他复杂的问题，网络字体是在一个不同的领域托管，每个视图收费。我认为这些都是次要的，尽管标题和基本的问题，使用‘for字体作为本地字体的后盾’)。

Answer 3

为了保存字体加载，还可以使用服务工作人员缓存字体或返回指定的字体文件。它可以拦截字体的加载并返回自定义响应。您可以使用工作箱来更容易地缓存字体文件。下面是缓存Google字体的示例

  import {ExpirationPlugin} from 'workbox-expiration';
  import {registerRoute} from 'workbox-routing';
  import {StaleWhileRevalidate} from 'workbox-strategies';

  // Cache Google Fonts with a stale-while-revalidate strategy, with
  // a maximum number of entries.
  registerRoute(
    ({url}) => url.origin === 'https://fonts.googleapis.com' ||
               url.origin === 'https://fonts.gstatic.com',
    new StaleWhileRevalidate({
      cacheName: 'google-fonts',
      plugins: [
        new ExpirationPlugin({maxEntries: 20}),
      ],
    }),
  );