React w Gatsby：为什么我的字体文件有时会被下载两次

Question

我正在使用 Gatsby 和 React 开发一个网站。而且我发现每次刷新页面时，都会加载 1.6 MB / 1.6 MB 的资源。我是 Web 开发的新手，所以我真的不知道这是要下载很多还是只是适量。

但是我确实注意到一个问题，那就是在我在 Netlify 上部署我的网站之后，字体文件被请求了两次，所以它被下载了两次。您可以在屏幕截图中看到请求了两个 Roboto-Light 文件。

以下是我在代码库中包含字体文件的方式。

首先我设置了一个webpack别名'@fonts': path.resolve(__dirname, 'src/fonts'),

然后在 src/styles/fonts.js 我有

import RobotoLight from '@fonts/Roboto/Roboto-Light.ttf';
export { RobotoLight};

终于在我的 src/styles/GlobalStyle.js 我有

import { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle`
@font-face {
  font-family: 'Roboto';
  src: url(${fontFamilies.RobotoLight}) format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: auto;
}
...

因此，每当我需要应用此 RobotoLight 字体时，我只需将元素的 font-family 设置为 Roboto.

我不知道为什么我的字体被下载了不止一次，我不知道这种包含字体的方式是否是最佳做法。另外我想知道 1.6 MB / 1.6 MB resources 是否太多了。

Answer 1

Is 1.6MB a lot to load on a page?

很难回答，因为这完全取决于上下文。对于没有任何图像的简单页面来说会很多，但对于更复杂的页面来说可能很少。此外，除了页面大小之外，还需要考虑页面加载的速度。 2MB 的页面加载（或似乎加载）速度可能比 500KB 的页面快。

The font file is requested twice so it is downloaded twice.

从您的屏幕截图来看，情况并非如此：Roboto 出现在 2 行上，但数据似乎只下载了一次 (88.3KB)。

How to load a font in Gatsby?

在 Gatsby 中添加 Google 字体的推荐方法是在头盔组件中包含 Google 字体 link 元素。 React Helmet 在 Gatsby tutorial.

中讨论

也可以通过 CSS 在 CSS 文件顶部导入来添加字体，但是字体下载将取决于 CSS 解析，而通过头盔将立即下载。

作为参考，CSS 导入看起来像这样：

@import url('https://fonts.googleapis.com/css?family=Roboto:300');

要使用 Roboto light，您需要添加字体粗细为 300 的 Roboto 版本。

<Helmet>
  <link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet"/>
</Helmet>

然后您可以在 CSS:

中使用它

html {
  font-family: 'Roboto', sans-serif;
  font-weight: 300; // Technically not needed if you load just one version of Roboto
}

出于性能考虑，最好只加载您使用的字体。如果您还想使用标准版本的 Roboto（字体粗细：400），您可以使用 link 代替：https://fonts.googleapis.com/css?family=Roboto:300,400.

React w Gatsby：为什么我的字体文件有时会被下载两次

React w Gatsby: Why is that my font file is downloaded twice sometimes

css

fonts

frontend

reactjs

gatsby