如何缩小 Google 字体 CSS

Question

我有以下 Google 字体 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

如何缩小它们？

Answer 1

你不能，因为那些 CSS 文件是从 google 提供的，而不是从你自己的域提供的（它们也不能根据 google 字体 ToS）。

真的想拯救您的用户bandwidth/ms：使用单个 HTTP 请求：

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

真的很想节省用户的带宽吗？使用较少的字体变化。

如果您尝试自己提供文件，则无法保证 google 会将字体文件保留在您下载的 CSS 文件中指定的 URLs：

https://fonts.gstatic.com/s/raleway/v11/YZaO6llzOP57DpTBv2GnyFKPGs1ZzpMvnHX-7fPOuAc.woff2

对我来说 URL 看起来不太稳定。

Answer 2

根据这个在线 post 这里 (https://discourse.roots.io/t/best-way-to-use-google-fonts/455/2) you cannot load the fonts minified directly from the good servers. However, you could minify the code yourself, either manually or a website such as https://cssminifier.com/.

希望这能回答您的问题。

Answer 3

显然，您无法缩小 google 托管的代码。您可以使用 CSS Minifier 。缩小 CSS 代码，然后用作静态 css 文件。然而，这个字体文件并没有那么大，我认为你不需要缩小它。 Google 说 here，它的加载时间很快。

Answer 4

我通常只复制我会使用的字体，比如我的网站只需要拉丁字符，字体粗细为 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 将其缩小。

如何缩小 Google 字体 CSS

How to Minify the Google font CSS

css

fonts

minify