将字体堆栈从 SCSS 迁移到 JSS (cssinjs)答案

【问题标题】：Migrating fonts stack from SCSS to JSS (cssinjs)将字体堆栈从 SCSS 迁移到 JSS (cssinjs)
【发布时间】：2019-11-28 12:45:04
【问题描述】：

我们使用大量具有不同权重的自定义字体用于各种目的。现在我们的整个堆栈都在使用带有 JSS 主题和样式的 Material UI，我们希望摆脱文件夹架构中最后几个 .scss 文件。

到目前为止，所有字体都与 SCSS 语法完美配合。

我们在应用程序的主入口点导入了一个index.scss 文件。它只有一行：

@import 'styles/fonts';

styles/_fonts.scss 包含很多字体：

@font-face {
    font-family: 'FooFont';
    src: url('styles/fonts/FooFont_LtIt.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

styles/fonts 文件夹中包含所有字体文件。

我已经成功地将全局 Material UI makeStyles 样式附加到 head。这允许我注入全局 CSS 而不是基于组件的 JSS：

'@global': {
    '@font-face': [
      {
        fontFamily: 'FooFont',
        src: 'url("styles/fonts/FooFont_Rg.ttf") format("truetype")',
        fontWeight: 400,
        fontStyle: 'normal',
      }
    ],
    '*': {
      boxSizing: 'border-box',
    },
    html: {
      height: '100%',
    },
...

此语法在<head> 的底部添加<style> 标记并应用样式。这适用于非字体样式。

主要问题：出于某种原因，它不会更新我的字体堆栈。字体已下载，但页面元素仍使用备用字体。

我也尝试过直接使用 JSS 并在 <head> 的顶部注入 CSS。没有运气。手动将字体写入头顶的<style> 标记会下载字体（我可以看到它们出现在“网络”选项卡中），但页面元素会更新并仍使用备用字体。

【问题讨论】：

标签： css fonts material-ui jss css-in-js

【解决方案1】：

您可以在index.html 的内联样式标签中添加字体吗？

这样它们将立即加载并可供您的其他代码使用。

我在 JS 中经常使用 CSS，但总是在我的根索引文件中加载字体。

所以只需在您的 index.html

中执行此操作

<head>
<style type="text/css">
 @font-face {
    font-family: 'FooFont';
    src: url('styles/fonts/FooFont_LtIt.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}
</style>
</head>

然后你可以随心所欲地管理所有其他样式

【讨论】：

正如我的帖子中所说，我使用了很多字体，所以这肯定会使我的 index.html 增长很多。这将使文件相当难以维护。我想在一个地方管理所有样式，这是我的样式文件夹，其中包含所有样式，包括字体。
如果需要，您可以使用标准 CSS 文件并导入该文件来分离关注点。问题是试图通过 JS 中的 CSS 指定您的字体路径，这可能会起作用，但根据我的经验，这对我来说并不值得头疼。如果将其注入头部，则在字体可用时 DOM 已经加载完毕
是的，这很可能是问题所在。我会在星期一向团队提出。
酷！你可以改进它。但现在是星期五，它有效！ :)

【解决方案2】：

你可能会遇到这个问题https://github.com/cssinjs/jss/issues/908

【讨论】：

好吧，我在控制台中没有看到任何错误。我可能不得不在代码沙箱中重现该问题。如果真的是 bug，我可以向 css-in-js 团队或 material-ui 提出。
字体确实插入了<head>，问题是显然字体系列找不到我的字体。
可能我这里缺乏一些基本的css知识，但令人困惑的是scss语法和插入的css几乎是一样的。