اذا أردت أن أستخدم عدة أنواع من الخطوط في صفحتي , كيف أدرج جميع الخطوط في ملف CSS ؟

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

1. استخدام @font-face مع ملفات الخطوط المحلية:

إذا كنت تمتلك ملفات الخطوط (.ttf, .woff,) محليًا وتريد تضمينها في ملف CSS الخاص بك، يمكنك استخدام قاعدة @font-face كما يلي:

 

@font-face {
    font-family: 'MyCustomFont1';
    src: url('fonts/MyCustomFont1.woff2') format('woff2'),
         url('fonts/MyCustomFont1.woff') format('woff'),
         url('fonts/MyCustomFont1.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MyCustomFont2';
    src: url('fonts/MyCustomFont2.woff2') format('woff2'),
         url('fonts/MyCustomFont2.woff') format('woff'),
         url('fonts/MyCustomFont2.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

/* استخدام الخطوط في العناصر */
body {
    font-family: 'MyCustomFont1', sans-serif;
}

h1 {
    font-family: 'MyCustomFont2', serif;
}

2. استخدام Google Fonts:

إذا كنت تفضل استخدام الخطوط من Google Fonts، يمكنك تضمين الروابط الخاصة بها في رأس ملف HTML أو داخل ملف CSS:
 

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Open+Sans:wght@400;600&display=swap');

/* استخدام الخطوط في العناصر */
body {
    font-family: 'Roboto', sans-serif;
}

h1 {
    font-family: 'Open Sans', sans-serif;
}

شكرا لك 

سؤال آخر : متى نقوم بوضع الخط بين علامتي '' ؟

بتاريخ 2 ساعة قال Mouad Hakkou:

شكرا لك 

سؤال آخر : متى نقوم بوضع الخط بين علامتي '' ؟

في الوضع العادي لا نضع علامات إقتباس لأسماء الخطواط إن كان مثل cairo أو cairo-bold مثلاً، لكن لو يوجد "مسافات، أرقام أو رموز أخرى غير الهايفن - " فنقوم بوضع اسم الخط بين علامتي إقتباس لكي يتم ترجمة اسمه بشكل صحيح وتمريره كنص واحد "cairo bold" فلو لم نضع علامتي الإقتباس لن يتم التعرف على الخط وسيتم إعتماد الخط الذي يليه في font-family أو الخط الإفتراضي في المتصفح.

بتاريخ 10 ساعة قال Mouad Hakkou:

شكرا لك 

سؤال آخر : متى نقوم بوضع الخط بين علامتي '' ؟

بالنسبة لسؤالك الأول، يمكنك استخدام خاصية @font-face لتعريف الخطوط المخصصة بعد التأكد من تحميلك لملفات الخطوط بصيغ مناسبة مثل .ttf أو .woff. يمكنك استخدام @font-face لتعريف كل خط، ثم استخدامه في أنماط CSS التي تريد بهذا الشكل التالي:

@font-face {
    font-family: 'MyCustomFont1';
    src: url('fonts/MyCustomFont1.woff2') format('woff2'),
         url('fonts/MyCustomFont1.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MyCustomFont2';
    src: url('fonts/MyCustomFont2.woff2') format('woff2'),
         url('fonts/MyCustomFont2.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

/* استخدام الخطوط في العناصر */
body {
    font-family: 'MyCustomFont1', sans-serif;
}

h1 {
    font-family: 'MyCustomFont2', serif;
}

أما بالنسبة للشق الثاني من سؤالك، فنستخدم علامات الاقتباس ('' أو "") عند تعريف اسم الخط داخل خصائص CSS، مثل @font-face أو font-family. وذلك لعدة أسباب:

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

وهذان مثالان عن ما كنت أتحدث عليه:

• اسم خط بدون مسافات:

font-family: MyFont, sans-serif;

• اسم خط مع مسافات:

font-family: 'My Custom Font', sans-serif;

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