使用@ font-face隔离样式组件

Question

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

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

我是否应该在我的@font-face入口点组件中定义ThemeProvider规则，并接受浏览器可能无法加载所需字体的事实？

Answer 1

这正是我们制作injectGlobal的原因。如果您看一下我们的docs，他们会说：

  

我们不鼓励使用此功能。每个应用最多使用一次，包含在一个文件中。这是一个逃生舱。仅用于罕见的@font-face定义或正文样式。

所以我要做的是创建一个名为global-styles.js的JS文件，其中包含以下代码：

// global-styles.js

import { injectGlobal } from 'styled-components';

injectGlobal`
  @font-face {
     font-family: 'My custom family';
     src: url('my-source.ttf');
  }
`

正如您所看到的，我们在这里所做的只是注入一些全局样式 - 在这种情况下@font-face。完成这项工作所需的最后一件事是在主入口点导入此文件：

// index.js

import './global-styles.js'

// More stuff here like ReactDOM.render(...)

这意味着您的font-face只会注入一次，但仍然所有组件都可以使用font-family: 'My custom family'访问它！

这样做会给你一个不可见的文本（FOIT），但这与styled-components无关 - 如果你使用的是vanilla CSS，它会是一样的。要摆脱FOIT需要更高级的字体加载策略，而不仅仅是@font-face。

由于这与styled-components无关，我强烈建议您观看这两个前端中心剧集，详细了解如何做到这一点："Crafting Web Font Fallbacks"和"The Fastest Webfont Loader in the West"！

Answer 2

在Chrome中同一枚硬币的另一面：

如果使用例如injectGlobal，请勿使用@ font-face反应路由器。 您将在每个新加载的路线上重新绘制所有应用程序。 这就是为什么：

在每条新路线上下载相同的字体文件。 只要将font-face包含在单独的.css文件中，问题就会在this github issue的最后一条评论中得到解决。

Answer 3

injectGlobal 已过时。使用 createGlobalStyle

maintainer

然后您可以在App.js中使用它：

admin

Answer 4

我同意

我重新加载了

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");
    }

并响应创建应用