3

我们为各种目的使用了许多具有不同权重的自定义字体。现在我们的整个堆栈都在使用带有 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 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%',
    },
...

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

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

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

4

2 回答 2

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>

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

于 2019-07-19T14:57:59.400 回答
1

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

于 2019-07-19T14:07:14.900 回答