Next.js项目集成Chakra UI时如何配置使用多种自定义字体

1. 提前安装需要用到的额外字体包 #

先把你要用到的所有字体通过@fontsource安装，示例中我们给Button用Inter、普通Text用Roboto、斜体文本用Playfair Display、下划线文本用Merriweather，执行安装命令：

npm install @fontsource/inter @fontsource/roboto @fontsource/playfair-display @fontsource/merriweather

安装完成后需要在项目入口文件（比如Next.js的_app.js/_app.tsx）引入所有字体：

import '@fontsource/open-sans'
import '@fontsource/raleway'
import '@fontsource/inter'
import '@fontsource/roboto'
import '@fontsource/playfair-display'
import '@fontsource/merriweather'

2. 扩展主题配置实现全局生效 #

你可以通过extendTheme同时配置全局自定义样式、组件默认样式，完整配置示例如下：

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

const theme = extendTheme({
  // 先注册所有自定义字体键值
  fonts: {
    heading: "Open Sans",
    body: "Raleway",
    // 新增自定义字体字段
    button: "Inter",
    text: "Roboto",
    italic: "Playfair Display",
    underline: "Merriweather",
  },
  // 配置组件默认样式
  components: {
    Button: {
      baseStyle: {
        fontFamily: "button", // 直接调用上面注册的字体键名
      },
    },
    Text: {
      baseStyle: {
        fontFamily: "text",
      },
    },
  },
  // 配置全局样式，覆盖行内标签的默认字体
  styles: {
    global: {
      // 斜体标签<i>、<em>默认用自定义italic字体
      "i, em": {
        fontFamily: "italic",
      },
      // 下划线标签<u>、<ins>默认用自定义underline字体
      "u, ins": {
        fontFamily: "underline",
      },
    },
  },
})

export default theme

3. 可选：局部自定义字体 #

如果不想全局配置，也可以在单个组件调用时直接指定字体：

// 单个按钮单独设置字体
<Button fontFamily="Open Sans">自定义字体按钮</Button>
// 单个文本片段单独设置字体
<Text>普通文本 <span style={{fontFamily: 'Raleway'}}>自定义片段</span></Text>

内容的提问来源于stack exchange，提问作者Abhay