Fatal编程技术网
  • css/
  • 将字体堆栈从SCS迁移到JSS（cssinjs）

将字体堆栈从SCS迁移到JSS（cssinjs）

css fonts material-ui

将字体堆栈从SCS迁移到JSS（cssinjs）,css,fonts,material-ui,jss,css-in-js,Css,Fonts,Material Ui,Jss,Css In Js,我们使用了许多不同重量的自定义字体，用于各种用途。现在，我们的整个堆栈都在使用带有JSS主题和样式的Material UI，我们想去掉文件夹体系结构中最后几个.scss文件 到目前为止，所有字体都能与SCSS语法完美配合 我们在应用程序的主入口点导入了一个index.scss文件。其中只有一行： @import 'styles/fonts'; 样式/u字体。scss包含许多字体面： @font-face { font-family: 'FooFont'; src: url('s

我们使用了许多不同重量的自定义字体，用于各种用途。现在，我们的整个堆栈都在使用带有JSS主题和样式的Material UI，我们想去掉文件夹体系结构中最后几个
.scss
文件

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

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

@import 'styles/fonts';

样式/u字体。scss
包含许多字体面：

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

style/font
文件夹中包含所有字体文件

我已经成功地将全局材质UI
makeStyles
样式附加到
头部
。这使我能够注入全局CSS，而不是基于组件的JS：

'@global': {
    '@font-face': [
      {
        fontFamily: 'FooFont',
        src: 'url("styles/fonts/FooFont_Rg.ttf") format("truetype")',
        fontWeight: 400,
        fontStyle: 'normal',
      }
    ],
    '*': {
      boxSizing: 'border-box',
    },
    html: {
      height: '100%',
    },
...
此语法在
的底部添加一个
标记，并应用样式。这适用于非字体样式

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

我还尝试过直接使用JSS，并在
的顶部注入CSS。不走运。将字体手动写入头部顶部的
标记会下载字体（我可以看到它们出现在“网络”选项卡中），但页面元素会更新，并且仍然使用回退字体。

您可能会遇到此问题

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

这样，它们将立即加载并可用于其他代码

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

所以只需在index.html中执行此操作


@字体{
字体系列：“FooFont”；
src:url（'style/font/FooFont_LtIt.ttf'）格式（'truetype'）；
字号：200；
字体风格：普通；
}
然后，您可以以任何方式管理所有其他样式

好吧，我在控制台中没有看到任何错误。我可能不得不在codesandbox中重现这个问题。如果它真的是一个bug，我可以将它提交给js团队或material-ui中的css。字体确实会插入到
，问题是字体家族显然找不到我的字体。也许我在这里缺乏一些基本的css知识，但令人困惑的是，scss语法和插入的css几乎相同。正如我在文章中所说，我使用了很多字体，因此这肯定会使我的index.html增长很多。这将使该文件很难维护。我想在一个地方管理所有样式，这是我的样式文件夹，其中包含所有样式，包括字体。如果需要，可以使用标准CSS文件并导入该文件来分离关注点。问题是试图通过JS中的CSS指定字体路径，这可能会起作用，但根据我的经验，这并不值得让我头疼。如果将其注入头部，则在字体可用时DOM已经加载，这很可能是问题所在。我会在周一和团队一起提出来。酷！你可以改进它。但是今天是星期五，而且很有效！：） 
<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>