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

Question

我们出于各种目的使用了大量不同粗细的自定义字体。现在我们的整个堆栈都在使用 Material UI 和 JSS 主题和样式，我们想摆脱文件夹架构中的最后几个 .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> 标签会下载字体（我可以看到它们出现在“网络”选项卡中）但页面元素会更新并仍然使用后备字体。

Answer 1

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

Answer 2

您可以只在 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>

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

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

Migrating fonts stack from SCSS to JSS (cssinjs)

css

fonts

material-ui

jss

css-in-js