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

Question

而不是使用远程 Google 字体 CSS:

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

我想把所有东西都放在本地。我记得只是下载这个 CSS 文件并将其插入我的 CSS 不行因为如果你下载 CSS 文件实际上会有所不同它来自桌面、移动等。它将适应浏览器上的字体格式（WOFF、TTF 等）

问题：什么相当于：

@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

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');
}

Answer 2

google-webfonts-helper

强烈推荐majodev的google-webfonts-helper:

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

woff2 是首选，因为它 advanced file compression (brotli).
woff – 好吧，第二好
ttf (truetype) 是一种后备（即和华夫饼制造商）

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

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

经常丢失 – 字体display/fallback选项

  font-display: fallback;

或

  font-display: swap;

这些属性实际上可以略微提高页面速度基准值（pagespeed insights：“确保文本在 webfont 加载期间保持可见”），方法是定义一个优先显示快速初始字体的加载策略（比如“来吧，更重要的是显示文本而不是在我缓慢的移动网络连接上等待这个臃肿的字体文件！”夸大了，但大约是 swap/fallback 选项的作用）。 MDN: font-display

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

外部字体来源（google 字体、cdns）和欧洲 GDPR
值得一提的是——如果您在欧洲为客户工作，强烈建议避免 cdn/externally 检索到的字体文件（和其他资产）。
它本身并没有被禁止——但是你可以简化你的工作来设置一个合适的 data protection policy copy.

顺便说一句：您可以安全地放弃相当弃用的 .eot 和 .svg files/rules。（eot 只被 ie 使用，svg 字体只在 safari 中工作——waffle makers 的字体支持可能会更好......）。

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

Static CSS for Google fonts and serving them from your own website (and not from gstatic CDN)

css

fonts

google-font-api

google-fonts

google-webfonts-helper