Google 字体的静态 CSS 并从您自己的网站（而不是 gstatic CDN）提供它们

Question

而不是使用远程 Google Font CSS：

<link href="https://fonts.googleapis.com/css2?family=FontName&display=swap" rel="stylesheet">

我希望一切都在本地。我记得仅仅下载这个CSS文件并将其插入到我的CSS中是不行的，因为如果你从桌面、移动设备等下载它，CSS文件实际上会有所不同。它会适应浏览器上的字体格式（WOFF、TTF） ， ETC。）

问题：什么相当于：

@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/merriweather/v28/u-440qyriQwlOrhSvowK_l5-fCZM.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

在所有浏览器上工作，并在本地存储字体文件？

我们是否必须包含 woff2、ttf 等 - 按什么顺序？这个的标准是什么？

Answer 1

谷歌网络字体助手

\n

我强烈推荐 majodev 的google-webfonts-helper：

\n

该工具有助于检索所有字体文件（woff2、woff、ttf 等），并且还将生成 css @font-face 规则。

\n

\n
• woff2 因其先进的文件压缩 (brotli) 而成为首选。
\n
• woff \xe2\x80\x93 好吧，第二好
\n
• ttf（truetype）是一个后备（即和华夫饼制造商）
\n

\n

生成的 @font-face 输出可能如下所示：

\n

/* merriweather-regular - latin-ext_latin */\n@font-face {\n  font-family: \'Merriweather\';\n  font-style: normal;\n  font-weight: 400;\n  src: local(\'\'),\n       url(\'fonts/merriweather-v28-latin-ext_latin-regular.woff2\') format(\'woff2\'), /* Chrome 26+, Opera 23+, Firefox 39+ */\n       url(\'fonts/merriweather-v28-latin-ext_latin-regular.woff\') format(\'woff\'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */\n}\n

\n

经常缺少 \xe2\x80\x93 字体显示/后备选项

\n

  font-display: fallback;\n

\n

或者

\n

  font-display: swap;\n

\n

这些属性实际上可以通过定义首选快速初始字体显示的加载策略（例如“来吧，显示更重要”）来稍微提高页面速度基准值（页面速度见解：“确保文本在网页字体加载期间保持可见”）文本比在我缓慢的移动网络连接上等待这个臃肿的字体文件更重要！”夸张，但大约是交换/后备选项的作用）。MDN：字体显示

\n

最好删除“本地”引用。
\n实际上是一个好主意\xe2\x80\x93 很多人可能已经在本地安装了常见的网络字体，例如“Open Sans”。
\n不幸的是，这种通过字体系列名称进行本地引用导致了一些问题 \xe2\x80\x93 本地可用的字体未显示在网页上。

\n

外部字体源（谷歌字体、cdns）和欧洲 GDPR
\n值得一提的是 \xe2\x80\x93 如果您为欧洲客户工作，强烈建议避免 cdn/外部检索的字体文件（和其他资产）。
\n它本身并不被禁止 \xe2\x80\x93 但您可以简化您的工作以设置正确的数据保护策略副本。

\n

顺便说一句：您可以安全地放弃相当不推荐使用的.eot和.svg文件/规则。（eot 仅由 ie 使用，svg 字体仅在 safari \xe2\x80\x93 中工作，华夫饼制造商的字体支持可能会更好......）。

\n

Answer 2

TTF 应该足够了，但 WOFF(2) 在支持的情况下可以节省加载时间。

@font-face {
  font-family: 'font';
  src: url('/font.eot');
  src: url('/font.eot#iefix') format('embedded-opentype'),
       url('/font.woff2') format('woff2'),
       url('/font.woff') format('woff'),
       url('/font.ttf') format('truetype'),
       url('/font.svg#font') format('svg');
}