css - 使用 React 动态设置字体

Question

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

我想做的是根据用户设置的 font-family 从 Google 请求正确的字体文件，然后为该特定字体注入(inject)应用的 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'
};