我正在了解谷歌Web字体的工作原理,发现当一个人添加类似于这样的内容时,
在样式表中,CSS解释器会获取给定URL上的内容:
现在,了解 Google 的人都知道,他们喜欢用尽可能少的字节向用户提供尽可能多的信息。这在 google.com 的源代码中很容易看出来,每个图像、样式表和脚本都嵌入在 HTML 中,没有任何多余的空格。这意味着所有内容都可以一次性获取,而不需要另一个请求,尽可能快地完成。既然我们知道 Google 喜欢这样做,那么为什么上面的 GET 请求不是这样的呢?
这段话的意思是:在这个例子中,使用更短的URL(例如像
@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 的人都知道,他们喜欢用尽可能少的字节向用户提供尽可能多的信息。这在 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;}
这段话的意思是:在这个例子中,使用更短的URL(例如像
http://f.g.co/A6ofNp
)可以减少399字节的数据传输量,如果Google网页字体的流量很大,这些节省下来的字节可以轻松地累加到几GB。为什么他们会这样做呢?看起来Google不会忽略传输效率这样的问题,所以我认为一定有原因。我的第一个推理是,可能某些浏览器或某些标准要求保留空格,或者类似于此类的要求。