Webfont 作为本地字体的后备答案

【问题标题】：Webfont as Fallback for local fontWebfont 作为本地字体的后备
【发布时间】：2015-12-21 19:08:49
【问题描述】：

我有一个关于网络字体及其加载方式的问题。问题是，我必须使用 Calibri 字体。这是一种常规的 windows 字体。

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

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

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

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

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

字体按 xxx 次浏览定价。问题是，这是否可行，如果可行，是否可以节省一些字体加载量？

【问题讨论】：

Calibri 很贵？？此字体是一种安全的网络字体，是现代操作系统的一部分 - 您可以在本地强制使用它们
仅适用于 Windows 操作系统。至少我的mac上没有它们。客户说了大约 99 美元/25 万次观看。
大多数现代 MAC 都有这种字体。为什么不使用 fontsquirrel.com/tools/webfont-generator 在本地保存字体...保持简单。
很奇怪。我有一个mbp 2015。但没有。好吧，但我在 myfonts 上找到了 calibri 作为 webfont 下载...所以我不知道客户在哪里找到了这个 99 $ / 250k 视图托管字体。我想这可以解决问题。

标签： css fonts font-face webfonts

【解决方案1】：

很遗憾，这不是 CSS 的工作方式。为了实现 webfont，您首先需要将它包含在您的网站中（通过 HTML <link>、CSS @import 或通过 JavaScript）。

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

一种解决方案可能是检测浏览器是否能够默认加载 Calibri 字体（使用 JavaScript），如果不能，则下载 webfont 并改用它，但这样做会造成糟糕的用户体验因此页面将默认使用可以加载的字体，然后在一段时间后更改为 webfont（在 JavaScript 加载它并且您的 CSS 启动之后）。

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

【讨论】：

是的，我认为@import 会被视为一个视图：/ 但感谢您澄清这一点。

【解决方案2】：

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

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

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

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

（我知道您最初的问题涉及其他复杂情况，网络字体托管在不同的域并按观看次数收费。我认为这些是次要的，尽管使用“Webfont 作为本地的后备”的标题和基本问题字体'。）

【讨论】：

【解决方案3】：

为了节省字体加载，您还可以使用 service worker 缓存字体或返回指定的字体文件。它可以拦截字体的加载并返回自定义响应。您可以使用workbox 来更轻松地缓存字体文件。下面是一个缓存谷歌字体的例子

  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}),
      ],
    }),
  );

【讨论】：