问题

我想使用一些字体，但我在查找有关如何导入等信息/文档方面遇到了困难。

我正在使用一个样式化组件库：Next.UI。

在我的 index.js 中，我正在创建一个主题，并在我的 React 应用程序中使用它。该主题已经可以使用，但还有一个字体属性。

有人能给我一个使用不同字体的示例吗？我如何知道支持哪些字体？或者我如何导入字体？

提前感谢！

以下是我的代码：

import { createTheme, NextUIProvider, styled } from '@nextui-org/react';

const theme = createTheme({
    type: "light",
    theme: {
        colors: {...},
        fonts: {
            sans: 'Comic Sans MS',
            mono: 'Andale Mono',
            serif: 'Gilda Display',
        },
    }
});

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <NextUIProvider theme={theme}>
        <App />
    </NextUIProvider>
);

希望这可以帮助您。

<details>
<summary>英文:</summary>

I want to use some fonts, but I&#39;m having difficulties to find information/documentation about how to import etc.

I am using a styled component library: [Next.UI][1].

In my index.js I am creating a theme and I use it in my React application. That theme already works, but there is also a property for fonts.

Can someone give me an example of using different fonts? And how do I know what fonts are supported? Or how can I import fonts?

Thanks in advance!

Here&#39;s my code for now:
    
 

    import { createTheme, NextUIProvider, styled } from &#39;@nextui-org/react&#39;;

        const theme = createTheme({
                type: &quot;light&quot;,
                theme: {
                    colors: {...},
                    fonts: {
                        sans: &#39;Comic Sans MS&#39;,
                        mono: &#39;Andale Mono&#39;,
                        serif: &#39;Gilda Display &#39;,
                    },
                }
            });
            
            const root = ReactDOM.createRoot(document.getElementById(&#39;root&#39;));
            root.render(
                &lt;NextUIProvider theme={theme}&gt;
                    &lt;App /&gt;
                &lt;/NextUIProvider&gt;
            );


  [1]: https://nextui.org/docs/theme/customize-theme

</details>


# 答案1
**得分**: 1

以下是翻译好的部分：

从styled-components模块中使用`createGlobalStyle`模块的示例...

fontStyles.js

```javascript
import { createGlobalStyle } from "styled-components";
import RobotoWoff from "./fonts/roboto-condensed-v19-latin-regular.woff";
import RobotoWoff2 from "./fonts/roboto-condensed-v19-latin-regular.woff2";

const FontStyles = createGlobalStyle`

@font-face {
  font-family: 'Roboto Condensed';
  src: url(${RobotoWoff2}) format('woff2'),
       url(${RobotoWoff}) format('woff');
}
`;

export default FontStyles;

index.js

import FontStyles from "./fontStyles";

ReactDOM.render(
  <React.StrictMode>
    <FontStyles />
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

希望这有帮助！

import { createGlobalStyle } from "styled-components";
import RobotoWoff from "./fonts/roboto-condensed-v19-latin-regular.woff";
import RobotoWoff2 from "./fonts/roboto-condensed-v19-latin-regular.woff2";

const FontStyles = createGlobalStyle`

@font-face {
  font-family: 'Roboto Condensed';
  src: url(${RobotoWoff2}) format('woff2'),
       url(${RobotoWoff}) format('woff');
}
`;

export default FontStyles;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

import FontStyles from "./fontStyles";

ReactDOM.render(
  <React.StrictMode>
    <FontStyles />
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);