使用 React 动态设置字体

Question

我正在制作一个可供各种不同用户使用的 React 应用程序。每个用户都可以设置他们希望应用程序呈现的 google 字体，font-family 将作为应用程序初始加载时进行的设置调用的一部分返回。此字体名称存储在 Redux 存储中。

我想做的是根据用户设置的 font-family 向 Google 请求正确的字体文件，然后为该特定字体注入应用程序的 css：

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'set-font', helvetica, sans-serif;
}
p, div {
  font-family: 'set-font', helvetica, sans-serif;
}

我进行了相当多的搜索，但我找不到任何关于我想要实现的目标的信息，尽管这似乎是一个相当常见的场景。

我遇到了webfontloader，这似乎是朝着获取字体文件的正确方向迈出的一步。

Answer 1

答案很简单。

使用webfontloader 库，然后在componentWillReceiveProps() 中检查一旦设置调用返回font-family，然后运行：

WebFont.load({
  google: {
    families: ['font-family-from-settings-call']
  }
});

并将此样式应用于应用程序：

const appStyle = {
  fontFamily: 'font-family-from-settings-call'
};