استخدام الخطوط المخصصة

سيرشدك هذا الدليل إلى كيفية إضافة خطوط الويب إلى مشروعك واستخدامها في مكوناتك.

استخدام ملف خط محلي

سيوضح هذا المثال كيفية إضافة خط مخصص باستخدام ملف الخط DistantGalaxy.woff.

أضف ملف الخط إلى public/fonts/.
أضف البيان التالي @font-face إلى CSS الخاص بك. يمكن أن يكون ذلك في ملف .css عام تستورده، أو في كتلة <style is:global>, أو في كتلة <style> في تصميم أو مكون معين حيث تريد استخدام هذا الخط.
```
/*  قم بتسجيل خطك المخصص وأخبر المتصفح بمكان العثور عليه.*/
@font-face {
  font-family: 'DistantGalaxy';
  src: url('/fonts/DistantGalaxy.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
```
استخدم قيمة font-family من بيان @font-face لتنسيق العناصر في المكون أو التخطيط الخاص بك. في هذا المثال، سيحصل العنوان <h1> على الخط المخصص، بينما لن يتأثر الفقرة <p>.
src/pages/example.astro
```
---
---
<h1>في مجرة بعيدة، بعيدة جداً...</h1>

<p>الخطوط المخصصة تجعل العناوين أكثر روعة!</p>

<style>
h1 {
 font-family: 'DistantGalaxy', sans-serif;
}
</style>
```

استخدام Fontsource

يُبسط مشروع Fontsource استخدام خطوط Google والخطوط مفتوحة المصدر الأخرى. يوفر وحدات npm التي يمكنك تثبيتها للخطوط التي ترغب في استخدامها.

ابحث عن الخط الذي تريد استخدامه في كتالوج Fontsource. في هذا المثال، سيتم استخدام Twinkle Star.
قم بتثبيت الحزمة الخاصة بالخط الذي اخترته باستخدام أداة إدارة الحزم مثل npm، pnpm أو yarn.
- npm
- pnpm
- Yarn
نافذة طرفيّة
npm install @fontsource/twinkle-star
نافذة طرفيّة
pnpm add @fontsource/twinkle-star
نافذة طرفيّة
yarn add @fontsource/twinkle-star
ستجد اسم الحزمة الصحيح في قسم “التثبيت السريع” في كل صفحة خط على موقع Fontsource. سيبدأ بـ @fontsource/ أو @fontsource-variable/ يليه اسم الخط.
استورد حزمة الخط في المكون الذي ترغب في استخدام الخط فيه. عادةً، يجب أن تقوم بذلك في مكون تخطيط مشترك لضمان توفر الخط عبر موقعك.

سيقوم الاستيراد بإضافة القواعد اللازمة لـ @font-face تلقائيًا لإعداد الخط.
src/layouts/BaseLayout.astro
```
---
import '@fontsource/twinkle-star';
---
```
استخدم اسم الخط كما هو موضح في مثال body في صفحة Fontsource كقيمة لـ font-family. هذا سيعمل في أي مكان يمكنك كتابة CSS فيه في مشروعك باستخدام Astro.
```
h1 {
  font-family: "Twinkle Star", cursive;
}
```

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

تسجيل الخطوط في Tailwind

إذا كنت تستخدم تكامل Tailwind (EN)، يمكنك استخدام أي من الطرق السابقة في هذه الصفحة لتثبيت الخط، مع بعض التعديلات. يمكنك إما إضافة جملة @font-face لخط محلي أو استخدام استراتيجية الاستيراد الخاصة بـ Fontsource لتثبيت خطك.

لتسجيل خطك في Tailwind:

اتبع أيًا من الأدلة السابقة، ولكن تخطَّ الخطوة الأخيرة من إضافة font-family إلى CSS.
أضف اسم الخط إلى tailwind.config.mjs.

هذا المثال يضيف Inter إلى مجموعة الخطوط بدون سيريف، مع الخطوط الاحتياطية الافتراضية من Tailwind CSS.
tailwind.config.mjs
```
import defaultTheme from 'tailwindcss/defaultTheme'

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [],
}
```
الآن، سيستخدم كل النص بدون سيريف (الافتراضي في Tailwind) في مشروعك الخط الذي اخترته، وستقوم أيضًا فئة font-sans بتطبيق خط Inter.

راجع توثيق Tailwind حول إضافة عائلات الخطوط المخصصة لمزيد من المعلومات.