字型模組

本 API 參考文件將幫助您理解如何使用 next/font/google 和 next/font/local。如需功能和使用說明，請參閱 優化字型 頁面。

字型函式參數

關於使用方式，請參閱 Google 字型 和 本地字型。

src

字型檔案的路徑，可以是字串或物件陣列 (類型為 Array<{path: string, weight?: string, style?: string}>)，相對於呼叫字型載入器函式的目錄。

用於 next/font/local

• 必填

範例：

• src:'./fonts/my-font.woff2' 其中 my-font.woff2 放在 app 目錄下的 fonts 目錄中
• src:[{path: './inter/Inter-Thin.ttf', weight: '100',},{path: './inter/Inter-Regular.ttf',weight: '400',},{path: './inter/Inter-Bold-Italic.ttf', weight: '700',style: 'italic',},]
• 如果在 app/page.tsx 中呼叫字型載入器函式並使用 src:'../styles/fonts/my-font.ttf'，則 my-font.ttf 應放在專案根目錄的 styles/fonts 中

weight

字型的 weight 有以下可能性：

• 字串，值為該字型可用的權重值，如果是 可變字型 則可以是範圍值
• 陣列，包含權重值，僅適用於非 Google 可變字型 的 next/font/google

用於 next/font/google 和 next/font/local

• 如果使用的字型 不是 可變字型 則必填

範例：

• weight: '400': 單一權重值的字串 - 對於 Inter 字型，可能的值為 '100', '200', '300', '400', '500', '600', '700', '800', '900' 或 'variable' (預設為 'variable')
• weight: '100 900': 可變字型的範圍值字串，介於 100 和 900 之間
• weight: ['100','400','900']: 非可變字型的 3 個可能值陣列

style

字型的 style 有以下可能性：

• 字串 值，預設為 'normal'
• 陣列，包含樣式值，僅適用於非 Google 可變字型 的 next/font/google

用於 next/font/google 和 next/font/local

• 選填

範例：

• style: 'italic': 字串 - 對於 next/font/google 可以是 normal 或 italic
• style: 'oblique': 字串 - 對於 next/font/local 可以是任何值，但建議使用 標準字型樣式
• style: ['italic','normal']: next/font/google 的 2 個值陣列 - 值來自 normal 和 italic

subsets

字型的 subsets，定義為字串陣列，包含您想要 預載入 的子集名稱。當 preload 選項為 true (預設值) 時，透過 subsets 指定的字型會在 head 中注入 link preload 標籤。

用於 next/font/google

• 選填

範例：

• subsets: ['latin']: 包含子集 latin 的陣列

您可以在 Google 字型頁面上找到字型的所有子集列表。

axes

某些可變字型具有額外的 axes 可以包含。預設情況下，僅包含字型權重以保持檔案大小。axes 的可能值取決於特定字型。

用於 next/font/google

• 選填

範例：

• axes: ['slnt']: 包含值 slnt 的陣列，適用於 Inter 可變字型，該字型具有 slnt 作為額外的 axes，如 此處 所示。您可以在 Google 可變字型頁面 上使用篩選器並尋找 wght 以外的 axes 來找到字型的可能 axes 值

display

字型的 display，可能的字串 值 為 'auto', 'block', 'swap', 'fallback' 或 'optional'，預設為 'swap'。

用於 next/font/google 和 next/font/local

• 選填

範例：

• display: 'optional': 指派為 optional 值的字串

preload

布林值，指定是否應 預載入 字型。預設為 true。

用於 next/font/google 和 next/font/local

• 選填

範例：

• preload: false

fallback

如果無法載入字型時使用的後備字型。字串陣列，無預設值。

• 選填

用於 next/font/google 和 next/font/local

範例：

• fallback: ['system-ui', 'arial']: 設定後備字型為 system-ui 或 arial 的陣列

adjustFontFallback

• 對於 next/font/google: 布林值，設定是否使用自動後備字型來減少 累積版面偏移 (CLS)。預設為 true。
• 對於 next/font/local: 字串或布林值 false，設定是否使用自動後備字型來減少 累積版面偏移 (CLS)。可能的值為 'Arial', 'Times New Roman' 或 false。預設為 'Arial'。

用於 next/font/google 和 next/font/local

• 選填

範例：

• adjustFontFallback: false: 用於 next/font/google
• adjustFontFallback: 'Times New Roman': 用於 next/font/local

variable

字串值，定義使用 CSS 變數方法 應用樣式時的 CSS 變數名稱。

用於 next/font/google 和 next/font/local

• 選填

範例：

• variable: '--my-font': 宣告 CSS 變數 --my-font

declarations

字型面 描述符 鍵值對的陣列，進一步定義生成的 @font-face。

用於 next/font/local

• 選填

範例：

• declarations: [{ prop: 'ascent-override', value: '90%' }]

應用樣式

您可以透過三種方式應用字型樣式：

• className
• style
• CSS 變數

className

返回一個唯讀的 CSS className，用於將載入的字型傳遞給 HTML 元素。

<p className={inter.className}>Hello, Next.js!</p>

style

返回一個唯讀的 CSS style 物件，用於將載入的字型傳遞給 HTML 元素，包括 style.fontFamily 以存取字型家族名稱和後備字型。

<p style={inter.style}>Hello World</p>

CSS 變數

如果您想在外部樣式表中設定樣式並在那裡指定其他選項，請使用 CSS 變數方法。

除了匯入字型外，還需匯入定義 CSS 變數的 CSS 文件，並如下設定字型載入器物件的變數選項：

import { Inter } from 'next/font/google'
import styles from '../styles/component.module.css'

const inter = Inter({
  variable: '--font-inter',
})

import { Inter } from 'next/font/google'
import styles from '../styles/component.module.css'

const inter = Inter({
  variable: '--font-inter',
})

要使用字型，請將要設定樣式的文字的父容器 className 設為字型載入器的 variable 值，並將文字的 className 設為外部 CSS 文件的 styles 屬性。

<main className={inter.variable}>
  <p className={styles.text}>Hello World</p>
</main>

<main className={inter.variable}>
  <p className={styles.text}>Hello World</p>
</main>

在 component.module.css CSS 文件中定義 text 選擇器類別如下：

.text {
  font-family: var(--font-inter);
  font-weight: 200;
  font-style: italic;
}

在上面的範例中，文字 Hello World 使用 Inter 字型和生成的後備字型設定樣式，並具有 font-weight: 200 和 font-style: italic。

使用字型定義文件

每次呼叫 localFont 或 Google 字型函式時，該字型都會在您的應用程式中作為一個實例託管。因此，如果您需要在多個地方使用相同的字型，應在一個地方載入它，並在需要的地方匯入相關的字型物件。這可以透過字型定義文件來實現。

例如，在應用程式目錄的根目錄下建立一個 styles 資料夾，並在其中建立一個 fonts.ts 文件。

然後，如下指定您的字型定義：

import { Inter, Lora, Source_Sans_3 } from 'next/font/google'
import localFont from 'next/font/local'

// 定義您的可變字型
const inter = Inter()
const lora = Lora()
// 定義非可變字型的 2 個權重
const sourceCodePro400 = Source_Sans_3({ weight: '400' })
const sourceCodePro700 = Source_Sans_3({ weight: '700' })
// 定義一個自訂本地字型，GreatVibes-Regular.ttf 存放在 styles 資料夾中
const greatVibes = localFont({ src: './GreatVibes-Regular.ttf' })

export { inter, lora, sourceCodePro400, sourceCodePro700, greatVibes }

import { Inter, Lora, Source_Sans_3 } from 'next/font/google'
import localFont from 'next/font/local'

// 定義您的可變字型
const inter = Inter()
const lora = Lora()
// 定義非可變字型的 2 個權重
const sourceCodePro400 = Source_Sans_3({ weight: '400' })
const sourceCodePro700 = Source_Sans_3({ weight: '700' })
// 定義一個自訂本地字型，GreatVibes-Regular.ttf 存放在 styles 資料夾中
const greatVibes = localFont({ src: './GreatVibes-Regular.ttf' })

export { inter, lora, sourceCodePro400, sourceCodePro700, greatVibes }

現在您可以在程式碼中使用這些定義如下：

import { inter, lora, sourceCodePro700, greatVibes } from '../styles/fonts'

export default function Page() {
  return (
    <div>
      <p className={inter.className}>使用 Inter 字型的 Hello world</p>
      <p style={lora.style}>使用 Lora 字型的 Hello world</p>
      <p className={sourceCodePro700.className}>
        使用權重 700 的 Source_Sans_3 字型的 Hello world
      </p>
      <p className={greatVibes.className}>使用 Great Vibes 字型的標題</p>
    </div>
  )
}

import { inter, lora, sourceCodePro700, greatVibes } from '../styles/fonts'

export default function Page() {
  return (
    <div>
      <p className={inter.className}>使用 Inter 字型的 Hello world</p>
      <p style={lora.style}>使用 Lora 字型的 Hello world</p>
      <p className={sourceCodePro700.className}>
        使用權重 700 的 Source_Sans_3 字型的 Hello world
      </p>
      <p className={greatVibes.className}>使用 Great Vibes 字型的標題</p>
    </div>
  )
}

為了更輕鬆地在程式碼中存取字型定義，您可以在 tsconfig.json 或 jsconfig.json 文件中定義路徑別名如下：

{
  "compilerOptions": {
    "paths": {
      "@/fonts": ["./styles/fonts"]
    }
  }
}

現在您可以如下匯入任何字型定義：

import { greatVibes, sourceCodePro400 } from '@/fonts'

import { greatVibes, sourceCodePro400 } from '@/fonts'

版本變更