仅在重新加载页面后才在生产中加载字体 - React js，情感答案

【问题标题】：Fonts loading in production only after reloading the page - React js, emotion仅在重新加载页面后才在生产中加载字体 - React js，情感
【发布时间】：2021-10-07 22:50:27
【问题描述】：

我正在使用 Emotion 的 Global 组件将全局字体应用到我的应用：

export const GlobalStyle: FC<{}> = () => (
  <Global
    styles={css`
      @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;700;900&display=swap');

      body {
        font-family: 'Poppins', sans-serif;
      }
`}
  />

这种方法在 localhost 上效果很好，但在生产中却不行：当我第一次加载页面时，会出现一些默认字体（Liberation serif），而不是 Poppins。只有在我刷新页面后才会将 Poppins 应用于正文。

我的印象是页面在字体可用之前渲染，这就是为什么刷新页面时显示正确字体的原因（那时字体已经可用），但在我第一次加载它时却没有.

任何帮助都将不胜感激，因为我试图到处寻找解决方案，但找不到任何解决方案。

【问题讨论】：

标签： javascript reactjs fonts emotion

【解决方案1】：

我最终解决了这个问题。这是由于与库 react-select （我也在使用）的冲突，它也有情感作为依赖。 React-select 有情感 v 11，而我的应用程序仍然有情感 10。在将情感更新到 v 11 后，问题消失了。 https://emotion.sh/docs/emotion-11

【讨论】：