css - 使用 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，这似乎是朝着获取字体文件的正确方向迈出的一步。

score 2 · Accepted Answer

答案最终变得非常简单。

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

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

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

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

1 回答 1