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

المتطلبات الأساسية

في هذا البرنامج التعليمي، أوصي بشدة أن تكون لديك المعرفة الأساسية بـ Tailwind CSS.

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

ما هو الخط المخصص؟

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

إضافة خطوط مخصصة لمشروعك

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

/* tailwind.config file */

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: { },
    },
  },
  plugins: [],
};

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

لإرفاق رابط Google بملف HTML الخاص بك، اتبع الخطوات التالية:

• انسخ الرابط من جوجل.

• اذهب إلى ملف Index.html.

• ابحث عن علامة الرأس والصق الرابط من Google Fonts بالداخل.
  

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

بعد لصق خطوط روبيك داخل ملف Index.html، يجب أن يكون خط روبيك متاحًا في مشروعك، ولكن لا يمكنك استخدامه بعد.

لاستخدامه:

انتقل إلى ملف tailwind.config.

أضف عائلة الخط داخل كائن الامتداد.

داخل عائلة الخطوط، سأعطي اسمًا للخط، وفي هذه الحالة يكون الاسم فرك. يمكن أن يكون لها أي اسم. افتح قوسًا، وأضف اسم الخط ("Rubik")، وخطًا احتياطيًا.

/* tailwind.config file */

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      fontFamily: {
        'rub': ["Rubik", "sans-serif"],
      },
    },
  },
  plugins: [],
};

يتعرف Tailwind على خط Rubik، لكنني لم أستخدمه. انتقل إلى الملف أو المكون الذي تريد استخدام الخط عليه وأضف خط روبيك إلى سماته class=''/className=''. لتطبيق الخط المخصص على مشروعك، استخدم Rub، وليس Rubik. انظر المثال أدناه:

// the file/component 

import React from 'react'

function CustomFonts() {
  return (
    

        

            
            
Default Font
            
Hello My name is Emeka and I enjoy creating things that     
            live on the internet. I also write technical articles.
        
        

            
            
Custom Font(Rubik Font)
            
Hello My name is Emeka and I enjoy         
            creating things that live on the internet. I also write             
            technical articles.
        
    
  )
}

export default CustomFonts

استخدام الخطوط التي تم تنزيلها محليًا

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

استخرج الملف المضغوط (أستخدم برنامج WinRAR لاستخراجه)، وانسخ الملف المستخرج، والصقه في مجلد في مشروعك. انظر المثال أدناه:

الخطوة التالية هي الانتقال إلى ملف /index.css وإدراج @font-face لإحضار الخط المخصص إلى المشروع. سأستخدم ADELIA لعائلة الخطوط وsrc: لتحديد مكان توفر الخط.

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
    font-family: 'ADELIA';
    src: url('./fonts/ADELIA.ttf');
}

لدمج خط Rubik، انتقل إلى ملف tailwind.config واتخذ الخطوات التالية:

• أضف اسم فئة الأداة المساعدة المخصصة.

• فتح قوس

• أدخل "ADELIA" و"مخطوطة" كخط احتياطي.

إليك مثال:

/* tailwind.config file */

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      fontFamily: {
        'rub': ["Rubik", "sans-serif"],
        'adelia': ['ADELIA', 'cursive']
      },
    },
  },
  plugins: [],
};

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

// the file/component 

import React from 'react'

function CustomFonts() {
  return (
    

        

            
            
Default font
            
Hello My name is Emeka and I enjoy creating things that     
            live on the internet. I also write technical articles.
        
        

            
            
Custom Font(Rubik Font)
            
Hello My name is Emeka and I enjoy         
            creating things that live on the internet. I also write             
            technical articles.
        
    
  )
}

export default CustomFonts

خاتمة

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