Question

出于各种目的，我们正在使用许多具有不同权重的custum字体。现在，我们的整个堆栈都将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': [
    {
        'font-family': 'FooFont',
        src: 'url("styles/fonts/FooFont_Rg.ttf") format("truetype")',
        'font-weight': 400,
        'font-style': 'normal',
    }
    ],
    '*': {
        boxSizing: 'border-box',
    },
    html: {
        height: '100%',
    },
...

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

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

我也尝试过直接使用JSS并将CSS插入<head>的顶部。没运气。手动将字体写入头部顶部的<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

2 个答案: