覆盖 Antd 全局字体

Question

我想覆盖Antd 5.1.2全局字体，但找不到任何有关如何执行此操作的文档。

我已Mulish使用@fontsource/mulish依赖项添加到我的应用程序中。然后我像这样导入它：

import "@fontsource/mulish";

然后我尝试启用字体

@font-face {
    font-family: "Mulish" !important;
}

:root{
     font-family: "Mulish", serif !important;
}

body{
    font-family: "Mulish", serif !important;
}

但这些会被 antd 覆盖。

覆盖全局 antd 字体的正确方法是什么？

Answer 1

您可以使用自定义主题。有一个SeedToken命名的，在组件的属性中将fontFamily其设置为。Mulishtheme.tokenConfigProvider

import { ConfigProvider, Typography } from "antd";

export default function App() {
  return (
    <ConfigProvider
      theme={{
        token: {
          fontFamily: "Mulish"
        }
      }}
    >
      <Typography.Text>Hello World!</Typography.Text>
    </ConfigProvider>
  );
}

输出：

代码沙盒