我正在使用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;
}
`}
/>
这种方法在本地主机上工作得很好，但在生产中却不是这样:当我第一次加载页面时，出现了一些默认字体(解放衬线)，而不是Poppins。只有在刷新页面后，Poppins才会应用到正文中。
我的印象是，页面是在字体可用之前呈现的，这就是为什么当页面刷新时显示正确的字体(此时字体已经可用)，而不是在我第一次加载它时显示正确的字体。
任何帮助将非常感激，因为我试图到处寻找解决方案，但未能找到任何。
我最终解决了问题。这是由于与库react-select(我也在使用)的冲突，它也有情感依赖。React-select拥有情感v 11，而我的应用仍然拥有情感10。将emotion升级到v11后，问题就消失了。https://emotion.sh/docs/emotion-11