وحدة الخطوط

سيساعدك مرجع API هذا على فهم كيفية استخدام next/font/google و next/font/local. لميزات الاستخدام، يرجى الاطلاع على صفحة تحسين الخطوط.

وسائط دالة الخط

للاستخدام، راجع خطوط جوجل و الخطوط المحلية.

src

مسار ملف الخط كسلسلة أو مصفوفة من الكائنات (من نوع Array<{path: string, weight?: string, style?: string}>) بالنسبة إلى الدليل الذي يتم فيه استدعاء دالة محمل الخط.

يستخدم في next/font/local

• مطلوب

أمثلة:

• src:'./fonts/my-font.woff2' حيث يتم وضع my-font.woff2 في دليل باسم fonts داخل دليل app
• 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

وزن الخط مع الاحتمالات التالية:

• سلسلة بقيم محتملة للأوزان المتاحة للخط المحدد أو نطاق من القيم إذا كان خطًا متغيرًا
• مصفوفة من قيم الوزن إذا كان الخط ليس خط جوجل متغير. ينطبق على 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

نمط الخط مع الاحتمالات التالية:

• سلسلة قيمة بقيمة افتراضية 'normal'
• مصفوفة من قيم النمط إذا كان الخط ليس خط جوجل متغير. ينطبق على next/font/google فقط.

يستخدم في next/font/google و next/font/local

• اختياري

أمثلة:

• style: 'italic': سلسلة - يمكن أن تكون normal أو italic لـ next/font/google
• style: 'oblique': سلسلة - يمكن أن تأخذ أي قيمة لـ next/font/local ولكن من المتوقع أن تأتي من أنماط الخطوط القياسية
• style: ['italic','normal']: مصفوفة من قيمتين لـ next/font/google - القيم من normal و italic

subsets

مجموعات فرعية الخط المحددة بمصفوفة من قيم السلسلة بأسماء كل مجموعة فرعية ترغب في تحميلها مسبقًا. سيتم حقق علامة تحميل مسبق للرابط في الرأس عند تعيين خيار preload على true، وهو الإعداد الافتراضي.

يستخدم في next/font/google

• اختياري

أمثلة:

• subsets: ['latin']: مصفوفة بمجموعة فرعية latin

يمكنك العثور على قائمة بجميع المجموعات الفرعية في صفحة خطوط جوجل للخط الخاص بك.

axes

بعض الخطوط المتغيرة تحتوي على محاور إضافية axes يمكن تضمينها. افتراضيًا، يتم تضمين وزن الخط فقط للحفاظ على حجم الملف. تعتمد القيم المحتملة لـ axes على الخط المحدد.

يستخدم في next/font/google

• اختياري

أمثلة:

• axes: ['slnt']: مصفوفة بقيمة slnt لخط Inter المتغير الذي يحتوي على slnt كمحاور إضافية كما هو موضح هنا. يمكنك العثور على قيم axes المحتملة للخط الخاص بك باستخدام الفلتر في صفحة خطوط جوجل المتغيرة والبحث عن محاور غير wght

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: قيمة منطقية تحدد ما إذا كان يجب استخدام خط احتياطي تلقائي لتقليل تحول التخطيط التراكمي. القيمة الافتراضية هي true.
• لـ next/font/local: قيمة سلسلة أو منطقية false تحدد ما إذا كان يجب استخدام خط احتياطي تلقائي لتقليل تحول التخطيط التراكمي. القيم المحتملة هي '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

تُرجع className CSS للقراءة فقط للخط المحمل لتمريرها إلى عنصر HTML.

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

style

تُرجع كائن style CSS للقراءة فقط للخط المحمل لتمريرها إلى عنصر 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 للنص إلى خاصية styles من ملف CSS الخارجي.

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

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

قم بتعيين فئة المحدد text في ملف CSS component.module.css كما يلي:

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

في المثال أعلاه، يتم تنسيق النص Hello World باستخدام خط Inter وخط الاحتياطي المنشأ مع font-weight: 200 و font-style: italic.

استخدام ملف تعريفات الخطوط

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

على سبيل المثال، أنشئ ملف fonts.ts في مجلد styles في جذر دليل تطبيقك.

ثم، حدد تعريفات الخطوط الخاصة بك كما يلي:

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

// تعريف الخطوط المتغيرة
const inter = Inter()
const lora = Lora()
// تعريف وزنين لخط غير متغير
const sourceCodePro400 = Source_Sans_3({ weight: '400' })
const sourceCodePro700 = Source_Sans_3({ weight: '700' })
// تعريف خط محلي مخصص حيث يتم تخزين GreatVibes-Regular.ttf في مجلد الأنماط
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()
// تعريف وزنين لخط غير متغير
const sourceCodePro400 = Source_Sans_3({ weight: '400' })
const sourceCodePro700 = Source_Sans_3({ weight: '700' })
// تعريف خط محلي مخصص حيث يتم تخزين GreatVibes-Regular.ttf في مجلد الأنماط
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}>Hello world using Inter font</p>
      <p style={lora.style}>Hello world using Lora font</p>
      <p className={sourceCodePro700.className}>
        Hello world using Source_Sans_3 font with weight 700
      </p>
      <p className={greatVibes.className}>My title in Great Vibes font</p>
    </div>
  )
}

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

export default function Page() {
  return (
    <div>
      <p className={inter.className}>Hello world using Inter font</p>
      <p style={lora.style}>Hello world using Lora font</p>
      <p className={sourceCodePro700.className}>
        Hello world using Source_Sans_3 font with weight 700
      </p>
      <p className={greatVibes.className}>My title in Great Vibes font</p>
    </div>
  )
}

لتسهيل الوصول إلى تعريفات الخطوط في الكود الخاص بك، يمكنك تعريف اسم مسار في ملفات tsconfig.json أو jsconfig.json كما يلي:

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

يمكنك الآن استيراد أي تعريف خط كما يلي:

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

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

تغييرات الإصدار