كيفية استخدام الخطوط

وحدة next/font تقوم بتحسين خطوطك تلقائيًا وإزالة طلبات الشبكة الخارجية لتحسين الخصوصية والأداء.

تتضمن استضافة ذاتية مدمجة لأي ملف خط. هذا يعني أنه يمكنك تحميل خطوط الويب بشكل مثالي دون حدوث تغيير في التخطيط.

للبدء في استخدام next/font، قم باستيرادها من next/font/local أو next/font/google، واستدعها كدالة مع الخيارات المناسبة، ثم قم بتعيين className للعنصر الذي تريد تطبيق الخط عليه. على سبيل المثال:

import { Geist } from 'next/font/google'

const geist = Geist({
  subsets: ['latin'],
})

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={geist.className}>
      <body>{children}</body>
    </html>
  )
}

import { Geist } from 'next/font/google'

const geist = Geist({
  subsets: ['latin'],
})

export default function Layout({ children }) {
  return (
    <html className={geist.className}>
      <body>{children}</body>
    </html>
  )
}

الخطوط محدودة بالمكون الذي تستخدم فيه. لتطبيق خط على تطبيقك بالكامل، أضفه إلى تخطيط الجذر (Root Layout).

خطوط جوجل

يمكنك استضافة أي خط من خطوط جوجل تلقائيًا. يتم تخزين الخطوط كموارد ثابتة وتقديمها من نفس النطاق الذي يتم فيه نشر تطبيقك، مما يعني عدم إرسال أي طلبات إلى جوجل من قبل المتصفح عندما يزور المستخدم موقعك.

للبدء في استخدام خط جوجل، قم باستيراد الخط المختار من next/font/google:

import { Geist } from 'next/font/google'

const geist = Geist({
  subsets: ['latin'],
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={geist.className}>
      <body>{children}</body>
    </html>
  )
}

import { Geist } from 'next/font/google'

const geist = Geist({
  subsets: ['latin'],
})

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={geist.className}>
      <body>{children}</body>
    </html>
  )
}

نوصي باستخدام الخطوط المتغيرة (variable fonts) للحصول على أفضل أداء ومرونة. ولكن إذا لم تتمكن من استخدام خط متغير، فستحتاج إلى تحديد وزن:

import { Roboto } from 'next/font/google'

const roboto = Roboto({
  weight: '400',
  subsets: ['latin'],
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={roboto.className}>
      <body>{children}</body>
    </html>
  )
}

import { Roboto } from 'next/font/google'

const roboto = Roboto({
  weight: '400',
  subsets: ['latin'],
})

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={roboto.className}>
      <body>{children}</body>
    </html>
  )
}

الخطوط المحلية

لاستخدام خط محلي، قم باستيراد الخط من next/font/local وحدد src لملف الخط المحلي الخاص بك. يمكن تخزين الخطوط في مجلد public. على سبيل المثال:

import localFont from 'next/font/local'

const myFont = localFont({
  src: './my-font.woff2',
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={myFont.className}>
      <body>{children}</body>
    </html>
  )
}

import localFont from 'next/font/local'

const myFont = localFont({
  src: './my-font.woff2',
})

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={myFont.className}>
      <body>{children}</body>
    </html>
  )
}

إذا كنت تريد استخدام ملفات متعددة لعائلة خط واحدة، يمكن أن يكون src مصفوفة:

const roboto = localFont({
  src: [
    {
      path: './Roboto-Regular.woff2',
      weight: '400',
      style: 'normal',
    },
    {
      path: './Roboto-Italic.woff2',
      weight: '400',
      style: 'italic',
    },
    {
      path: './Roboto-Bold.woff2',
      weight: '700',
      style: 'normal',
    },
    {
      path: './Roboto-BoldItalic.woff2',
      weight: '700',
      style: 'italic',
    },
  ],
})

الخط

مرجع API لوحدة الخطوط

كيفية استخدام الخطوط

خطوط جوجل

الخطوط المحلية

الخط

On this page