logo标签列表

如何压缩谷歌字体的CSS？

cssfontsminify
4

我有以下谷歌字体的CSS文件:

未压缩的CSS文件:

https://fonts.googleapis.com/css?family=Open+Sans:400,600,600i,700
https://fonts.googleapis.com/css?family=Raleway:400,400i,500,600,600i,700,800

我该如何将它们压缩？
5个回答
8
无法这样做，因为这些CSS文件是从Google而不是您自己的域名服务的（根据Google字体的使用条款，也不能这样做）。
如果你真的想节省用户的带宽和时间，请使用一个单独的HTTP请求：
https://fonts.googleapis.com/css?family=Open+Sans:400,600,600i,700|Raleway:400,400i,500,600,600i,700,800
如果您真的非常希望节省用户的带宽，请使用较少的字体变体。
如果您试图自行提供该文件，则无法保证Google会将字体文件保存在您已下载的CSS文件中指定的URL上。
https://fonts.gstatic.com/s/raleway/v11/YZaO6llzOP57DpTBv2GnyFKPGs1ZzpMvnHX-7fPOuAc.woff2

这个URL看起来并不是非常稳定可靠。
1

2022年11月

这个问题被提出已经5年了。
如果有人正在寻找更清晰的解决方案，那么这里就是。

回答 OP 的问题

字体文件相对较小。由于您没有指定为什么要进行缩小，我将假设它是为了性能。

截至今天，Google 官方并没有正式提到过缩小。他们以性能闻名，如果他们要求您使用其 API 中的字体，则有充分的理由，您不必担心。

避免多次请求

您可以将多个字体合并为一个 API 请求。使用 family= 参数。这将减少 HTTP 请求。

https://fonts.googleapis.com/css2
?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,600&family=PT+Serif:wght@700
&family=Raleway:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap

使用Preconnect

如果您正在使用来自Google服务器的字体，则可以使用preconnect，这将切断初始连接和SSL查找时间。

之前
enter image description here

之后
enter image description here

减少样式

Bold和ExtraBol有轻微的变化，如果您在正文中使用它们，则可以仅保留一种样式。

如果您在h1上使用该样式，则使用text=参数。

您听说过text=参数吗？

你应该考虑在字体请求URL中指定text=值。这样可以让Google Fonts返回一个针对你的请求进行优化的字体文件。在某些情况下，这可以将字体文件的大小减少高达90%。
要使用此功能，只需在API请求中添加text=。例如，如果你只是在博客标题中使用Inconsolata字体，你可以将标题本身作为text=的值。以下是请求的示例：
https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello

本地调用

如果您不经常更改字体（为什么有人要这样做），您可以从原始链接下载CSS并手动压缩。

结论

使用googleapi使用字体有很多好处，其中之一是浏览器兼容性。

阅读更多
https://web.dev/reduce-webfont-size/#consider-a-variable-font https://developers.google.com/fonts/docs/css2#multiple_families https://developers.google.com/fonts/docs/css2#optimizing_your_font_requests

1
我通常只复制我会使用的字体，比如我的网站只需要拉丁字符和400、600字重，那么我会复制类似于以下内容的东西：
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v14/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(https://fonts.gstatic.com/s/opensans/v14/MTP_ySUJH_bn48VBG8sNSugdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

然后，你可以使用其他CSS来压缩它。
0
0

很明显，您不能缩小由谷歌托管的代码。您可以使用CSS Minifier。缩小CSS代码，然后将其用作静态CSS文件。但是，这个字体文件并不是很大，我认为您不需要将其缩小。谷歌在此处表示，它的加载时间很快。

当谷歌将Raleway字体的URL从https://fonts.gstatic.com/s/raleway/v11/YZaO6llzOP57DpTBv2GnyFKPGs1ZzpMvnHX-7fPOuAc.woff2更改为https://fonts.gstatic.com/s/raleway/v11/YZaO6llzOP57DpTBv2GnyFKPGs1ZzpMvnHX-7fPOuYc.woff2时，您的设计会出现问题... - Adam Jenkins
为什么不直接将其作为静态文件和CDN自己提供服务呢？ - user9016207
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接