React MaterialUI动态字体加载

时间:2018-08-29 23:57:03

标签: css reactjs fonts material-ui dynamic-content

我们正在构建一个Web应用程序,其中不同的用户会看到不同的颜色,字体,边框宽度等,具体取决于应用程序加载时从数据库中提取的Material UI JSON主题。

问题与动态字体有关。 人们尝试了哪些方法来动态加载主题所需的字体?要明确一点,一个用户看到的字体可能不同于另一用户看到的字体。

例如,用户一个可能具有以下主题定义: "fontFamily": "'Galaxie', sans-serif"

两个用户可能具有以下主题定义:"fontFamily": "'Roboto', Arial, sans-serif"

通常,您将定义一个CSS文件或向HTML添加一行以从服务器加载这些字体。但是,我们希望用户一仅需下载Galaxie字体,而用户二仅需下载Roboto字体。

我们正在考虑的当前解决方案:

  • 只是让所有用户加载所有字体(不会大规模使用)
  • 创建一个CSS文件以定义字体,该文件会根据哪个用户从服务器请求动态地填充

1 个答案:

答案 0 :(得分:0)

您可以从此处导入自定义字体。

https://material-ui.com/guides/interoperability/#raw-css