Google 字体外部 CSS 与在我的 css 中复制外部 css 代码相比？

Question

我通过添加外部链接来使用谷歌字体

<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>

此CSS仅具有此代码

@font-face {
  font-family: 'Arvo';
  font-style: normal;
  font-weight: normal;
  src: local('Arvo'), url('http://themes.googleusercontent.com/static/fonts/arvo/v3/WJ6D195CfbTRlIs49IbkFw.woff') format('woff');
}

我可以在我的项目CSS文件style.css中粘贴并使用此代码吗还是有必要并且更好地将其用作谷歌的外部CSS链接

Answer 1

您应该从 Google 链接它，因为：

• Google 提供 不同的 CSS 文件，具体取决于在发出请求的浏览器上。
• 如果 Google 决定更改该 CSS（例如更改字体文件名！），您的网站上将自动更新。

因此，从 Google 链接它会更可靠。

---

如果您想在本地托管字体，请阅读以下内容：如何在我自己的服务器上托管谷歌网络字体？

Answer 2

我想唯一的问题是，如果 Google 决定将字体位置从“http://themes.googleusercontent.com/static/fonts/arvo/v3/WJ6D195CfbTRlIs49IbkFw.woff”更改为 'http://themes.googleusercontent.com/static/fonts/arvo/v3/somethingelse.woff'。

通过使用他们的链接，他们可能会保持最新状态。基本上我想说的是，他们不太可能更改链接'http://fonts.googleapis.com/css?family=Arvo'，但更有可能更改' http://themes.googleusercontent.com/static/fonts/arvo/v3/WJ6D195CfbTRlIs49IbkFw.woff'。我可能会坚持使用他们的外部链接，唯一的缺点是页面加载时间有一点点微小的差异，因为它必须先下载 CSS，然后再下载字体。但谷歌拥有如此多的服务器，而且速度如此之快，我不会产生任何盲目的差异。希望这是有道理的。这也是我的看法，也许其他人有不同的想法。

Answer 3

我只是将它包含到我的项目 css 文件中，因为：

• 你可以保存一个 http 请求:)
• 完全控制你的 css

如果谷歌曾经更改过外部 css 文件，也许你的项目会变得疯狂。但这可能取决于项目。在大多数情况下，用户是否已缓存文件并不重要。如果您只有一个小站点，用户已准备好此文件的机会往往为零。只是我的 2 美分…

Answer 4

更新 2024

正如之前所解释的，您可能应该避免复制 google CSS 内容，因为您仍在从 google 服务器获取字体。

过期的文件谷歌字体链接：

如前所述：官方谷歌字体文件链接可能会过期。
例如，提供的网址 http://themes.googleusercontent.com/static/fonts/arvo/v3/WJ6D195CfbTRlIs49IbkFw.woff 在 2024 年不起作用。

不幸的是，API 查询网址也可能发生这种情况。

过期的 API 查询 - 工作文件链接

最近（10 月 24 日）我被 @Leo 告知可变字体链接不再工作（请参阅 “如何在 Google Fonts 中使用可变字体？”。

在检查链接时，我发现“Inter”字体系列已经将其设计理念从提供slnt轴转变为真正的轴，

因此下面的URL不再起作用

https://fonts.googleapis.com/css2?family=Inter:slnt,[email protected],100..900

，而是需要使用。支持真正斜体的新查询

https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900

诚然，这是一个非常罕见的例子，但像“Inter New”这样的新的单独字体名称（...还有 Interight）将是防止导入/链接 URL 损坏的更好决定。

有趣的事实：在我的代码片段中使用复制的指向 google 文件服务器的 @font-face 规则仍然有效！

/* old inter with slant axis */

@font-face {
  font-family: 'Inter';
  font-style: oblique 0deg 10deg;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v13/UcCo3FwrK3iLTcviYwY.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



/* latin - new inter */
@font-face {
  font-family: 'Inter New';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v18/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L5UUMbm9wUkHU.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



body {
  font-family: 'Inter';
  font-size: 5vmin;
}

.slant {
  font-variation-settings: "slnt" -10;
}

.slant2 {
  font-variation-settings: "slnt" -5;
}


.italic {
  font-style: italic
}

.interNew{
  font-family: 'Inter New';
}

<p class="">Hamburgefonstiv 1234 (Inter)</p>
<p class="slant">Hamburgefonstiv 1234 (Inter slanted/oblique - slnt:-10)</p>
<p class="slant2">Hamburgefonstiv 1234 (Inter slanted/oblique - slnt:-5)</p>
<p class="interNew italic">Hamburgefonstiv 1234 (true italic!!!)</p>

还需要浏览器嗅探吗？

正如thirtydot所解释的，谷歌根据检测到的代理返回不同的CSS代码。不可否认，这在 2011 年浏览器开始实现自定义字体支持时至关重要，尤其是对于像 Internet Explorer 这样的“后来者”。如今，所有现代浏览器都支持 woff2 以及 可变字体。

然而，至少在 Opera 中，当使用有效的变量查询 URL 时，您仍然可以获得字体的静态版本 - 尽管 Opera 多年来也完美地支持可变字体（与所有基于 chromium/blink 的浏览器一样） 。因此，在这种罕见的边缘情况下（主要对 SO 片段、codepen 等代码演示有用）：使用缓存/复制的文件 URL 确保在 Opera 中也能正确渲染轴。

隐私问题

如果您为欧洲客户工作，您应该在本地提供字体 - 由于 GDPR - 一般数据保护条例（将于 2018 年实施）。