الخطوط المخصصة (Web Fonts) في CSS

بواسطة /

المقدمة

تلعب الخطوط دورًا كبيرًا في إبراز هوية الموقع وتحسين تجربة المستخدم. باستخدام الخطوط المخصصة (Web Fonts)، يمكن للمطورين الخروج من دائرة الخطوط الافتراضية (مثل Arial وTimes New Roman) واستخدام خطوط مميزة تناسب العلامة التجارية أو الغرض من الموقع. يوفر CSS طريقتين أساسيتين لاستخدام الخطوط المخصصة:

  1. Google Fonts لاستيراد خطوط عبر الإنترنت.
  2. @font-face لتضمين الخطوط يدويًا في المشروع.

أولًا: استخدام Google Fonts في CSS

Google Fonts هي خدمة مجانية تقدمها Google، تتيح لك استخدام خطوط متنوعة في مواقعك بسهولة.

خطوات استخدام Google Fonts:

  1. اختيار الخط:
    انتقل إلى Google Fonts واختر الخط الذي يناسب مشروعك.
  2. تضمين الخط في HTML:
    انسخ رابط الخط وضعه داخل وسم <head> في ملف HTML:
   <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap" rel="stylesheet">
  1. تطبيق الخط في CSS:
    استخدم الخط في CSS باستخدام خاصية font-family:
   body {
     font-family: 'Cairo', sans-serif;
   }

مثال عملي: استخدام Google Fonts

HTML:

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>استخدام Google Fonts</title>
  <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Cairo', sans-serif;
      background-color: #f0f0f0;
      margin: 0;
      padding: 20px;
    }

    h1 {
      font-weight: 700;
      color: #333;
    }

    p {
      font-weight: 400;
      color: #555;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <h1>مرحبًا بكم في موقعنا</h1>
  <p>نحن نستخدم خط "Cairo" من Google Fonts لتحسين تجربة القراءة.</p>
</body>
</html>

ثانيًا: تضمين خطوط مخصصة باستخدام @font-face

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

خطوات استخدام @font-face:

  1. رفع ملف الخط:
    قم برفع ملف الخط (بامتداد .ttf، .woff، .woff2) إلى مجلد المشروع.
  2. تضمين الخط باستخدام @font-face:
    عرف الخط في CSS باستخدام الكود التالي:
   @font-face {
     font-family: 'CustomFont';
     src: url('fonts/CustomFont.woff2') format('woff2'),
          url('fonts/CustomFont.woff') format('woff');
     font-weight: normal;
     font-style: normal;
   }
  1. استخدام الخط في CSS:
    بعد تعريف الخط باستخدام @font-face، يمكنك استخدامه كما تستخدم أي خط آخر:
   body {
     font-family: 'CustomFont', sans-serif;
   }

مثال عملي: تضمين خط مخصص باستخدام @font-face

هيكل المجلد:

/project
│
├── /fonts
│    └── CustomFont.woff2
│    └── CustomFont.woff
│
├── index.html
└── styles.css

HTML:

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>تضمين خط مخصص باستخدام @font-face</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>هذا النص يستخدم خطًا مخصصًا</h1>
  <p>تم تضمين الخط يدويًا باستخدام @font-face.</p>
</body>
</html>

CSS (styles.css):

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

body {
  font-family: 'CustomFont', sans-serif;
  background-color: #f0f0f0;
  margin: 0;
  padding: 20px;
}

h1 {
  font-size: 32px;
  font-weight: bold;
  color: #333;
}

p {
  font-size: 18px;
  line-height: 1.8;
  color: #555;
}

الفرق بين Google Fonts و@font-face

Google Fonts@font-face
يوفر خطوطًا جاهزة عبر الإنترنتيسمح بتضمين الخطوط محليًا في المشروع
لا حاجة إلى تحميل ملفات الخطوطيتطلب رفع ملفات الخطوط يدويًا
يعتمد على اتصال الإنترنتيعمل حتى بدون اتصال بالإنترنت
يوفر مجموعة واسعة من الخطوطيتيح استخدام خطوط مملوكة أو غير متوفرة على Google Fonts

خاتمة

في هذا الدرس، تعلمنا كيفية استخدام الخطوط المخصصة في CSS بطريقتين:

  1. Google Fonts، وهي الطريقة الأسهل لاستيراد الخطوط عبر الإنترنت.
  2. @font-face، التي تتيح تضمين الخطوط يدويًا في المشاريع.

استخدام الخطوط المخصصة يضفي طابعًا فريدًا على الموقع ويساعد في تحسين جاذبيته وتجربة المستخدم. يجب اختيار الخطوط بعناية لضمان وضوح النصوص وسهولة قراءتها.

أسئلة شائعة (FAQ)

1. هل يمكنني استخدام Google Fonts بدون اتصال بالإنترنت؟

  • لا، تحتاج Google Fonts إلى اتصال بالإنترنت. إذا كنت تريد استخدام الخط دون اتصال، قم بتنزيله واستخدم @font-face.

2. هل يؤثر استخدام الخطوط المخصصة على سرعة تحميل الموقع؟

  • نعم، قد يؤدي تحميل خطوط كثيرة إلى زيادة زمن التحميل. يُفضل تحميل الخطوط بشكل انتقائي واستخدام صيغة woff2 لضغط الملفات.

3. ما هي أفضل تنسيقات الخطوط للاستخدام في الويب؟

  • woff وwoff2 هما الصيغتان المفضلتان لأنهما مضغوطتان وسريعتا التحميل.

بذلك نكون قد انتهينا من درس الخطوط المخصصة. هل أنت مستعد للانتقال إلى الدرس التالي؟ 😊

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

Scroll to Top
Verified by MonsterInsights