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

发布于 2024-12-01 16:38:02 字数 469 浏览 6 评论 0原文

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

<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链接

I'm using a google font by adding a External link

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

This CSS only having this code

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

Can i just paste and use this code in my project css file style.css or it's necessary and better use it as a google's external css link

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

伴梦长久 2024-12-08 16:38:02

您应该从 Google 链接它,因为:

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


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

You should link it from Google, because:

  • Google serves a different CSS file depending on the browser that's making the request.
  • If Google ever decides to make changes to that CSS (such as changing the font filename!), the update will be automatic on your site.

So, it's more robust to link it from Google.


If you want to host the font locally, read this: How to host google web fonts on my own server?

沧桑㈠ 2024-12-08 16:38:02

我想唯一的问题是,如果 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,然后再下载字体。但谷歌拥有如此多的服务器,而且速度如此之快,我不会产生任何盲目的差异。希望这是有道理的。这也是我的看法,也许其他人有不同的想法。

I imagine the only problem would be if Google decide to change the font location from 'http://themes.googleusercontent.com/static/fonts/arvo/v3/WJ6D195CfbTRlIs49IbkFw.woff' to 'http://themes.googleusercontent.com/static/fonts/arvo/v3/somethingelse.woff'.

By using their link they will likely keep that up to date. Basically what I am trying to say is they are less likely to change the link 'http://fonts.googleapis.com/css?family=Arvo' but are more likely to change 'http://themes.googleusercontent.com/static/fonts/arvo/v3/WJ6D195CfbTRlIs49IbkFw.woff'. I'd probably stick with their external link, the only downside would be a tiny tiny tiny tiny difference in your page load time as it has to download the CSS and then the font. But Google has so many servers that are so fast it iwon't make a blind bit of difference. Hope that made sense. That's my view on it as well, someone else might have another idea.

孤寂小茶 2024-12-08 16:38:02

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

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

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

I would just include it to my project css file because:

  • you can save one http request :)
  • full control about your css

If google ever changes the external css file, maybe your project goes crazy. But this may depend on the Project. In most cases it does not matter if the user has the file already cached or not. If you have only a small site the chance the user has this file allready chached tends to zero. Just my 2 cents…

凉世弥音 2024-12-08 16:38:02

更新 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 年实施)。

Update 2024

As explained before, you should probably rather avoid copying the google CSS content as you're still fetching fonts from google servers.

Expired file google font links:

As previously mentioned: official google font file links may expire.
For instance, the provided URL http://themes.googleusercontent.com/static/fonts/arvo/v3/WJ6D195CfbTRlIs49IbkFw.woff doesn't work in 2024

Unfortunately, this may also happen to API query URLS.

Exprired API query – working file link

I was recently (Oktober 24) informed by @Leo that a variable font link wasn't working anymore (See "How do I use variable fonts with Google Fonts?".

When checking the links I dicovered the "Inter" font family has switched their design concept from providing a slnt axis to a genuine.

So the below URL wasn't working anymore

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

Instead, you needed to use the new query supporting true italics

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

Admittedly this is a very rare example but a new separate font name like "Inter New" (...there is also a Inter tight) would have been a better decision to prevent import/link URLs from breaking.

Fun fact: In my snippet using a copied @font-face rule pointing to google file servers is still working!

/* 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>

Browser sniffing still required?

As explained by thirtydot google returns different CSS code based on the detected agent. Admittedly, this was crucial in 2011 when browsers were beginning to implement custom font support – especially for "late-adopters" like internet explorer. Nowadays, all modern browsers support woff2 as well as variable fonts.

However, at least in Opera you still get static versions of a font when using a valid variable query URL – despite the fact Opera also supports variable fonts flawlessly for many years (as all chromium/blink based browsers). So in this rare edge case (mainly useful for code demos like SO snippets, codepens etc.): using a cached/copied file URL ensured a correct axes rendering also in Opera.

Privacy concerns

If you're working for European clients you should rather serve the fonts locally – due to GDPR - General Data Protection Regulation (to be implemented in 2018).

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文