在NextJS中如何指定字体倾斜参数slnt？

你遇到的问题是next/font默认配置方式不直接支持设置Inter字体的slnt倾斜轴参数，之前的写法不符合TypeScript类型约束或加载逻辑，以下是两种可行的解决方案：

方案一：手动指定字体源URL（最稳妥） #

直接复刻你用@import时的字体URL，通过src选项传入next/font配置，既能利用next/font的托管优化，又能精准指定slnt参数：

import { Inter } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  src: [
    {
      path: 'https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-8,100..900&display=swap',
      weight: '100..900',
      style: 'normal',
    },
  ],
});

方案二：利用可变字体轴配置（需适配TS类型） #

Inter是可变字体，支持slnt倾斜轴，若你的Next.js版本类型定义支持slant属性，可直接在style中配置：

import { Inter } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  weight: '100..900', // 必须指定可变字重范围，启用可变字体特性
  style: [
    'normal',
    {
      slant: -8,
    },
  ],
});

如果方案二抛出TypeScript错误，说明你的Next.js版本类型定义未包含slant属性，此时优先使用方案一即可解决问题。

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