我们出于各种目的使用了许多不同权重的自定义字体。现在我们的整个堆栈都在使用带有 JSS 主题和样式的材质 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文件夹中包含所有字体文件。
我已经成功地将全局材质 UImakeStyles样式附加到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>标签会下载字体(我可以看到它们出现在"网络"选项卡中)，但页面元素会更新并仍然使用回退字体。
您可以在index.html的内联样式标签中添加字体吗？
这样，它们将立即加载并可用于您的其他代码。
我经常在JS中使用CSS，但总是在我的根索引文件中加载字体。
因此，只需在索引中执行此操作.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>
然后，您可以根据需要管理所有其他样式
您可能会遇到此问题 https://github.com/cssinjs/jss/issues/908