styled-components - 带有@font-face 的隔离样式组件

Question

我正在使用 https://github.com/styled-components/styled-components .

我正在尝试为需要 @font-face 的组件制定最佳策略。 .我想确保每个组件都独立于其上下文，所以我定义 font-family每个人的风格。但是如果我使用 injectGlobal在多个组件中，我得到多个 @font-face相同字体的规则。

我应该只定义 @font-face我的 ThemeProvider 中的规则入口点组件并忍受浏览器可能未加载所需字体的事实？

Answer 1

我同意

我重新加载

import { createGlobalStyle } from 'styled-components';
import { silver } from 'shared-components/themes/colors';

export default createGlobalStyle`
    @font-face {
        font-family: "Proxima Nova";
        font-style: normal;
        font-weight: 300;
        font-display: swap;
        src: url("/static/media/fonts/proxima_nova/ProximaNova_300.otf");
    }

并 react 创建应用程序