ChakraUI扩展字体使用方法

Question

你好，我有一个问题，我可以为标题设置 2 种不同的字体吗？ <Heading fontFamily={???}></Heading> 并在其中设置字体系列。我不想使用一种字体系列作为标题。

import { extendTheme } from "@chakra-ui/react";

const theme = extendTheme({
  fonts: {
    heading: "Dancing Script",
  },
});

export default theme;

Answer 1

是的，如果你在扩展主题中声明这两种字体，你可以写<Heading fontFamily="myFont1"></Heading>和<Heading fontFamily="myFont2">Some Text</Heading>：

import { extendTheme } from "@chakra-ui/react";
import "@fontsource/dancing-script";

const theme = extendTheme({
  fonts: {
    myFont1: "Dancing Script",
    myFont2: "Times New Roman",
  },
});

export default theme;

此外，请注意我不必为 Times New Roman 导入任何外部库（因为它可能已经安装在您用户的计算机上）但我必须导入 @fontsource/dancing-script 因为它不是一种标准字体。（记得在使用前用npm install --save @fontsource/dancing-script安装）。

您可能可以在 FontSource, and for more information (and alternative solutions) there is the Chakra UI documentation on fonts 上找到您需要的任何字体。

Answer 2

添加到 Giorgio 的答案中，如果您想在主题定义中包含尽可能多的代码，您甚至可以为 headers 的所有变体声明字体。

<Heading>h1 text</Heading>
<Heading as="h2">h2 text</Heading>

然后像这样配置您的主题：

import { extendTheme } from "@chakra-ui/react";
import "@fontsource/dancing-script";

const theme = extendTheme({
  fonts: {
    heading: "Dancing Script",
    subHeading: "Times New Roman",
  },
  textStyles: {
    h2: {
      'font-family': 'var(--chakra-fonts-subHeading)',
    },
  }
});

export default theme;

你会注意到，不幸的是，我不得不使用 'font-family' 而不是 fontFamily（这似乎是一个现有的错误，font-weight 也是如此）并引用变量 this方式：var(--chakra-fonts-subHeading)

ChakraUI扩展字体使用方法

How to use ChakraUI extended fonts

typescript

reactjs

chakra-ui