你如何在 CSSObject 中定义@font-face？答案

【问题标题】：How do you define @font-face in a CSSObject?你如何在 CSSObject 中定义@font-face？
【发布时间】：2022-01-17 21:36:30
【问题描述】：

假设我有以下 @font-face 规则，我想将它们作为 CSSObject 而不是扁平字符串。

@font-face {
  font-family: 'Blah';
  font-weight: 400;
  font-style: normal;
  src:
    url('./Blah-Normal.woff2') format('woff2'),
    url('./Blah-Normal.woff') format('woff');
}

@font-face {
  font-family: 'Blah';
  font-weight: 700;
  font-style: bold;
  src:
    url('./Blah-Bold.woff2') format('woff2'),
    url('./Blah-Bold.woff') format('woff');
}
...

如何将其定义为CSSObject？我正在尝试将其传递给 Mui 的MuiCssBaseline，它需要CSSObject 或string。我想传递一个CSSObject，以便我可以更轻松地在其上添加更多 CSS 样式并且更易于阅读。但现在它只是一个仅包含 @font-face 定义的扁平字符串。

// import { CSSObject } from '@mui/material';
// import { CSSObject } from '@emotion/styled';
import { CSSObject } from 'styled-components';

const BlahCSSObject = {
  '@font-face': {
    // magic?
    src: [
      // it definitely don't like the following format
      url('./Blah-Bold.woff2') format('woff2'),
      url('./Blah-Bold.woff') format('woff')
    ]
  },
  '@font-face': { // would cause dupe keys no?
    ...
  },
  ...
} as CSSObject;

谢谢！

【问题讨论】：

标签： css reactjs fonts styled-components emotion

【解决方案1】：

我认为你可以使用 styled-components 中的 css 方法。

import { css } from 'styled-components'

const myOwnStyle = css`
  @font-face {
    // styles
  }
`

【讨论】：

试过了，没用。 css 返回的 SerializedStyles 与 MuiCssBaseline 所期望的 string | CSSObject 不兼容。
也许使用纯 css 文件来添加字体是一个很好的解决方案，并将其导入您的应用程序，然后使用您设置的自定义 muiTheme，您可以访问您的字体以便在任何地方使用它跨度>