next.js 脉轮用户界面给出错误的字体

von4xj4u  于 2023-11-18  发布在  其他
关注(0)|答案(1)|浏览(82)

所以我试图使用M+圆角1c字体以下脉轮ui方向https://chakra-ui.com/community/recipes/using-fonts,但由于某种原因脉轮ui不改变字体.它显示在身体上的字体是正确的,但他们显示一些字体像时代新罗马

import Layout from "./layout";
import { ChakraProvider } from "@chakra-ui/react";
import "@/styles/globals.css";
import theme from "./theme";

export default function App({ Component, pageProps }) {
  return (
    <ChakraProvider theme={theme}>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </ChakraProvider>
  );
}

个字符


的数据

hts6caw3

hts6caw31#

你真的很接近了!你的主题设置正确,你只需要导入你想要使用的字体文件。
下面的所有代码都取自Chakra UI关于向应用程序here添加字体的文档。
你可以做的一个选择是像这样直接将字体导入添加到你的应用组件中。如果你只添加一种字体,这可能是你想要走的路。如果你想走这条路,文档确实有一个添加多种字体类型的例子。

import '@fontsource/raleway/400.css'
import '@fontsource/open-sans/700.css'

import {
  ChakraProvider,
  Container,
  Stack,
  Heading,
  Text,
} from '@chakra-ui/react'
import theme from './theme'

const App = () => ()

字符串
你只需要确保你是从像这样的文件或npm包中访问字体。
第一个月

相关问题