使用NextJS时如何指定字体倾斜“slnt”？

Question

我想为 Inter 使用特定的倾斜字体，特别是 slnt -8。

通过 SCSS 加载 url 时，我可以指定 slnt -8，如下所示：

@import url("https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-8,100..900&display=swap");

使用 NextJS 提供的 next/font/google 我可以指定字体的粗细和样式，但不能指定倾斜度

我想使用 next/font，因为它自行托管 Google 提供的字体。是的，仅仅斜体就“倾斜”太多了。

我尝试在导入过程中指定倾斜，如下所示：

const inter = Inter({ subsets: ["latin"], style: ["normal", { slant: -8 }]}); 

或者

const inter = Inter({ subsets: ["latin"], style: ["normal", "slnt:-8"]}); 

或者

const inter = Inter({ subsets: ["latin"], style: ["normal"]}, slant: "-8"); 

以上所有情况要么抛出 TS 错误，要么加载失败

Answer 1

要在使用 next/font 时实现 Inter 字体的特定倾斜度（-8），通常需要直接通过 CSS 或 JavaScript 进行配置。 next/font 简化了加载字体的过程，但它并不直接支持通过 Google Fonts API 参数提供的所有功能，例如倾斜调整。

以下是解决此问题的方法：

CSS导入方法：

由于您想使用 next/font 来托管字体并且需要特定的倾斜度 (-8)，因此您仍然可以通过直接在 CSS 中导入和应用样式来实现此目的。具体方法如下：

/* 样式/globals.css */

/* 导入具有特定倾斜度的 Inter 字体 */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;  /* Adjust weight as needed */
  font-stretch: normal;
  font-display: swap;
  src: local('Inter Regular'), local('Inter-Regular'),
       url('/fonts/inter-regular.woff2') format('woff2');
  font-named-instance: 'Regular';  /* Optional: specify named instance */
  font-variation-settings: 'slnt' -8;  /* Specify the slant here */
}

在此示例中：

将 /fonts/inter-regular.woff2 替换为 next/font 提供的托管 Inter 字体文件的正确路径。 根据您需要的字体粗细和倾斜度调整字体粗细、字体样式和字体变化设置。