如何确定google字体的文件大小？

Question

我使用谷歌字体，我已经为我的项目包括roboto字体，我需要点亮和常规字体样式，但我不知道该字体的文件大小。

Answer 1

您可以使用Web检查器查看网页上所有静态资产的文件大小。它位于Chrome，Firefox或Safari中的开发者工具下。

Answer 2

在Chrome中，您可以打开开发人员工具并转到“网络”标签。单击全部或CSS过滤器按钮，然后查找Google字体的CSS嵌入链接。它将是这样的：

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

如果你查看size列（右键单击任何列以添加size列，如果你没有看到它），你会看到一个相对较小的文件大小，但这不是字体本身的大小，这只是包含字体文件的代码：

/* 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

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