为什么谷歌不压缩他们的网络字体CSS？

我正在查看谷歌的Webfonts是如何工作的，并发现当一个人放置像

这样的东西时，

@include url('https://fonts.googleapis.com/css?family=Archivo+Narrow:400,400italic,700,700italic');

在样式表中

， CSS解释器就会获取给定URL中的内容:

/* latin-ext */
@font-face {
  font-family: 'Archivo Narrow';
  font-style: normal;
  font-weight: 400;
  src: local('Archivo Narrow Regular'), local('ArchivoNarrow-Regular'), url(https://fonts.gstatic.com/s/archivonarrow/v5/DsLzC9scoPnrGiwYYMQXpj3sPXe5Q4a3bCZMR7ryN4o.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo Narrow';
  font-style: normal;
  font-weight: 400;
  src: local('Archivo Narrow Regular'), local('ArchivoNarrow-Regular'), url(https://fonts.gstatic.com/s/archivonarrow/v5/DsLzC9scoPnrGiwYYMQXpkU-p1xzoRgkupcXIqgYFBc.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, U+E0FF, U+EFFD, U+F000;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo Narrow';
  font-style: normal;
  font-weight: 700;
  src: local('Archivo Narrow Bold'), local('ArchivoNarrow-Bold'), url(https://fonts.gstatic.com/s/archivonarrow/v5/M__Wu4PAmHf4YZvQM8tWsGwfvudCZ8RknLCBmdpmlzc.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo Narrow';
  font-style: normal;
  font-weight: 700;
  src: local('Archivo Narrow Bold'), local('ArchivoNarrow-Bold'), url(https://fonts.gstatic.com/s/archivonarrow/v5/M__Wu4PAmHf4YZvQM8tWsBKUK2vxztsQZZBkxIuj92o.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, U+E0FF, U+EFFD, U+F000;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo Narrow';
  font-style: italic;
  font-weight: 400;
  src: local('Archivo Narrow Italic'), local('ArchivoNarrow-Italic'), url(https://fonts.gstatic.com/s/archivonarrow/v5/vqsrtPCpTU3tJlKfuXP5zY_xx5DQT9YeiXYckfzGhA8.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo Narrow';
  font-style: italic;
  font-weight: 400;
  src: local('Archivo Narrow Italic'), local('ArchivoNarrow-Italic'), url(https://fonts.gstatic.com/s/archivonarrow/v5/vqsrtPCpTU3tJlKfuXP5zeEHrUcvG35DlvKNjpX7jU4.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, U+E0FF, U+EFFD, U+F000;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo Narrow';
  font-style: italic;
  font-weight: 700;
  src: local('Archivo Narrow Bold Italic'), local('ArchivoNarrow-BoldItalic'), url(https://fonts.gstatic.com/s/archivonarrow/v5/wG6O733y5zHl4EKCOh8rSR5iW2BxMHezLzQnpy1d6Fo.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo Narrow';
  font-style: italic;
  font-weight: 700;
  src: local('Archivo Narrow Bold Italic'), local('ArchivoNarrow-BoldItalic'), url(https://fonts.gstatic.com/s/archivonarrow/v5/wG6O733y5zHl4EKCOh8rSflEgKdwIoor_PG0pLo4YVU.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, U+E0FF, U+EFFD, U+F000;
}

现在，了解谷歌，他们喜欢在尽可能少的字节内为用户提供尽可能多的信息。这在google.com的源代码中很容易看到，其中每个图像、样式表和脚本都嵌入HTML中，没有任何多余的空白。这意味着所有这些都是一次性完成的，而无需再次请求，速度越快越好。既然知道Google喜欢这样做，为什么上面的GET不能像这样:

@font-face{font-family:'Archivo Narrow';font-style:normal;font-weight:400;src:local('Archivo Narrow Regular'),local('ArchivoNarrow-Regular'),url(https://fonts.gstatic.com/s/archivonarrow/v5/DsLzC9scoPnrGiwYYMQXpj3sPXe5Q4a3bCZMR7ryN4o.woff2)format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF;}@font-face{font-family:'Archivo Narrow';font-style:normal;font-weight:400;src:local('Archivo Narrow Regular'),local('ArchivoNarrow-Regular'),url(https://fonts.gstatic.com/s/archivonarrow/v5/DsLzC9scoPnrGiwYYMQXpkU-p1xzoRgkupcXIqgYFBc.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,U+E0FF,U+EFFD,U+F000;}@font-face{font-family:'Archivo Narrow';font-style:normal;font-weight:700;src:local('Archivo Narrow Bold'),local('ArchivoNarrow-Bold'),url(https://fonts.gstatic.com/s/archivonarrow/v5/M__Wu4PAmHf4YZvQM8tWsGwfvudCZ8RknLCBmdpmlzc.woff2)format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF;}@font-face{font-family:'Archivo Narrow';font-style:normal;font-weight:700;src:local('Archivo Narrow Bold'),local('ArchivoNarrow-Bold'),url(https://fonts.gstatic.com/s/archivonarrow/v5/M__Wu4PAmHf4YZvQM8tWsBKUK2vxztsQZZBkxIuj92o.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,U+E0FF,U+EFFD,U+F000;}@font-face{font-family:'Archivo Narrow';font-style:italic;font-weight:400;src:local('Archivo Narrow Italic'),local('ArchivoNarrow-Italic'),url(https://fonts.gstatic.com/s/archivonarrow/v5/vqsrtPCpTU3tJlKfuXP5zY_xx5DQT9YeiXYckfzGhA8.woff2)format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF;}@font-face{font-family:'Archivo Narrow';font-style:italic;font-weight:400;src:local('Archivo Narrow Italic'),local('ArchivoNarrow-Italic'),url(https://fonts.gstatic.com/s/archivonarrow/v5/vqsrtPCpTU3tJlKfuXP5zeEHrUcvG35DlvKNjpX7jU4.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,U+E0FF,U+EFFD,U+F000;}@font-face{font-family:'Archivo Narrow';font-style:italic;font-weight:700;src:local('Archivo Narrow Bold Italic'),local('ArchivoNarrow-BoldItalic'),url(https://fonts.gstatic.com/s/archivonarrow/v5/wG6O733y5zHl4EKCOh8rSR5iW2BxMHezLzQnpy1d6Fo.woff2)format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF;}@font-face{font-family:'Archivo Narrow';font-style:italic;font-weight:700;src:local('Archivo Narrow Bold Italic'),local('ArchivoNarrow-BoldItalic'),url(https://fonts.gstatic.com/s/archivonarrow/v5/wG6O733y5zHl4EKCOh8rSflEgKdwIoor_PG0pLo4YVU.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,U+E0FF,U+EFFD,U+F000;}

这将在这个例子中减少399字节(如果为字体制作更短的url，可能是http://f.g.co/A6ofNp之类的东西，很容易更多)，考虑到谷歌的webfonts有多少流量，它们可以很容易地加起来达到gb。

他们为什么要这样做?看起来很奇怪，谷歌会让像传输效率这样的东西滑落，所以我觉得一定有原因。我的第一个理由是，可能有些浏览器或某些标准要求空格，或类似的东西。

@Blazemonger关于压缩算法比传输空白花费更多的观点不是很准确，因为，了解谷歌，他们可能已经硬编码了空白(即，它不是由人类生成的，甚至不是特定的CSS生成器，只是一个固定的字符串)。

现在，有几件事要考虑:

如果开发者可以阅读生成的代码，他们就更容易理解谷歌字体在做什么。
那些"开发人员"可能只是能拼凑一些代码的设计师，不足以知道你可以漂亮地打印CSS。如果代码开头是可读的，对他们来说就容易多了。

;

你提到节省107字节。您是否考虑过HTTP头本身可能比这个更大?(他们)。此外，如果谷歌免费提供1080p格式的Youtube视频(4K格式即将推出)，107字节可能会成为他们的笑柄。

相关内容

最新更新

热门标签：