html - 如何确定谷歌字体的文件大小？

Question

我正在使用谷歌字体，并且我在我的元素中包含了 roboto 字体，并且我需要浅色和常规字体样式，但我无法知道该字体的文件大小是多少。

Answer 1

在 Chrome 中，您可以打开开发者工具并转到“网络”选项卡。单击“全部”或“CSS 过滤器”按钮，然后查找 Google 字体的 CSS 嵌入链接。它会是这样的:

https://fonts.googleapis.com/css?family=Roboto+Condensed%3A300%2C400%2C700

如果您查看大小列(如果看不到它，请右键单击任何列以添加大小列)，您会看到相对较小的文件大小，但这不是字体本身的大小，这只是包含字体文件的代码:

/* latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Condensed Bold'), local('RobotoCondensed-Bold'), url(https://fonts.gstatic.com/s/robotocondensed/v16/ieVi2ZhZI2eCN5jzbjEETS9weq8-32meGCQYbw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

您将在此处看到浏览器将加载的实际字体，https://fonts.gstatic.com/s/robotocondensed/v16/ieVi2ZhZI2eCN5jzbjEETS9weq8-32meGCQYbw.woff2

留在开发工具的“网络”选项卡上，单击“字体过滤器”按钮，现在您将看到字体文件本身及其各自的文件大小。