Webfont 作为本地字体的后备

Question

我对网络字体及其加载方式有疑问。问题是，我必须使用 Calibri 字体。这是一个普通的 windows 字体。

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

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

然而，有一个 Calibri 的网络字体，但它非常昂贵。所以我的想法是像这样构建字体堆栈：

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

所以第一个字体应该是本地字体，第二个是webfont。所以如果找不到本地的，它会加载网络字体。

该字体的价格为 xxx 次浏览。问题是，这行得通吗？如果行的话，这会节省我一些字体负载吗？

Answer 1

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

这意味着在您的 font-family 声明之前，字体已经加载（并且可能被托管字体的公司计为 view） .

一种解决方案是检测浏览器是否能够默认加载 Calibri 字体（使用 JavaScript），如果不能，则下载 webfont 并使用它，但这样做你d 创建一个 strage 用户体验，页面将默认使用可以加载的字体，然后在短时间内更改为 webfont（在 JavaScript 加载它并且你的 CSS 启动后） .

如果你愿意沿着这条路走下去，有几个主题是关于如何检测通过 JavaScript 加载了哪种字体，例如 Detecting which font was used in a web page

Answer 2

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

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

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

此方法优于给 web-font 一个不同的名称并将两者都包含在您的字体堆栈中，这可能 sometimes 导致 web-font 在不需要时被下载。通过将两者都移至 @font-face 规则，如果在用户系统上发现了 Calibri 的本地安装，web-font 将不会下载。

（我知道你最初的问题涉及其他复杂问题，web-font 托管在不同的域并按视图收费。我认为这些是次要的，但使用 [= 的标题和基本问题22=].)

Answer 3

为了节省字体加载，您还可以使用 service worker 来缓存字体或 return 指定的字体文件。它可以拦截字体加载和 return 自定义响应。您可以使用 workbox 来更轻松地缓存字体文件。下面是缓存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}),
      ],
    }),
  );

Webfont 作为本地字体的后备

Webfont as Fallback for local font

css

fonts

webfonts

font-face