NextJS14集成Ant Design5时全局字体不生效求助

我正在使用NextJS 14，当前配置如下：

globals.css #

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@100;200;300;400;500;600;700;800&display=swap');
@layer reset {
    * {
      box-sizing: border-box;
      padding: 0;
      margin: 0;
    }
}

全局layout.js代码 #

import '../globals.css'
import { notFound } from 'next/navigation';
import { getTranslations } from 'next-intl/server';
import React from 'react';
import { colors, fonts } from '../globalTokens.stylex';
import * as stylex from '@stylexjs/stylex';
    
const styles = stylex.create({
  html: {
    colorScheme: 'light dark',
  },
  reset: {
    minHeight: '100%',
    margin: 0,
    padding: 0,
  },
  body: {
    background: colors.background,
    fontFamily: "Plus Jakarta Sans" //我在此处指定了应用的字体
  },
});

export default async function RootLayout({ children, params: { locale } }) {

  if (!locales.includes(locale)) notFound();

  return (
    <html {...stylex.props(styles.html, styles.reset)} lang={locale}>
      <body {...stylex.props(styles.reset, styles.body)}>
        {children}
      </body>
    </html>
  )
}

但Ant Design 5中的文本和按钮并未应用该字体，该如何解决？

Ant Design 5自带默认字体，需通过以下方式覆盖其默认配置：

方案1：CSS变量全局覆盖 #

在globals.css中添加Ant Design字体变量定义，利用CSS层叠优先级覆盖默认值：

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@100;200;300;400;500;600;700;800&display=swap');
@layer reset {
    * {
      box-sizing: border-box;
      padding: 0;
      margin: 0;
    }
}

/* 覆盖Ant Design字体变量 */
:root {
  --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-monospace: 'Plus Jakarta Sans', monospace;
}

方案2：Ant Design ConfigProvider配置 #

在全局layout中引入ConfigProvider，直接指定主题字体配置：

import '../globals.css'
import { notFound } from 'next/navigation';
import { getTranslations } from 'next-intl/server';
import React from 'react';
import { colors, fonts } from '../globalTokens.stylex';
import * as stylex from '@stylexjs/stylex';
import { ConfigProvider } from 'antd';
    
const styles = stylex.create({
  html: {
    colorScheme: 'light dark',
  },
  reset: {
    minHeight: '100%',
    margin: 0,
    padding: 0,
  },
  body: {
    background: colors.background,
    fontFamily: "Plus Jakarta Sans"
  },
});

// 定义Ant Design主题配置
const theme = {
  token: {
    fontFamily: 'Plus Jakarta Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif',
    fontFamilyMonospace: 'Plus Jakarta Sans, monospace',
  },
};

export default async function RootLayout({ children, params: { locale } }) {

  if (!locales.includes(locale)) notFound();

  return (
    <html {...stylex.props(styles.html, styles.reset)} lang={locale}>
      <body {...stylex.props(styles.reset, styles.body)}>
        <ConfigProvider theme={theme}>{children}</ConfigProvider>
      </body>
    </html>
  )
}

方案3：提升body样式优先级（应急方案） #

若Stylex样式优先级被Ant Design覆盖，可在globals.css中直接给body设置高优先级字体：

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@100;200;300;400;500;600;700;800&display=swap');
@layer reset {
    * {
      box-sizing: border-box;
      padding: 0;
      margin: 0;
    }
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

注：优先推荐前两种规范方案，!important仅作为临时应急使用。

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