العودة إلى الدورة

الدرس 27: خطوط الويب (@font-face) و Google Fonts

إتقان CSS: من الصفر إلى الاحتراف في 100 درس

27. خطوط الويب (@font-face) و Google Fonts

لضمان رؤية جميع المستخدمين لنفس الخط المخصص (ليس فقط خطوط النظام)، نستخدم خطوط الويب. الآلية الأساسية هي قاعدة @font-face.

استخدام @font-face (استضافة ذاتية)

تسمح لك هذه القاعدة بتعريف خط والربط بملفات الخطوط (.woff, .ttf إلخ) المخزنة على خادمك الخاص.

css @font-face { font-family: 'MyCustomFont'; /* الاسم الذي ستستخدمه في font-family */ src: url('/fonts/custom-font.woff2') format('woff2'), url('/fonts/custom-font.woff') format('woff'); font-weight: normal; font-style: normal; }

/* الآن استخدم الخط */ body { font-family: 'MyCustomFont', sans-serif; }

استخدام الخدمات المستضافة (Google Fonts)

يستخدم معظم المطورين خدمات مثل Google Fonts، التي تستضيف الملفات لك وتدير التوافق عبر المتصفحات. هذا أبسط بشكل عام.

كيفية استخدام Google Fonts:

  1. احصل على الرابط: اختر خطوطك على Google Fonts وانسخ وسم <link> الناتج.

  2. الصقه في HTML: ضع الرابط في قسم <head> في ملف HTML: html

  3. طبق CSS: استخدم اسم الخط تماماً كما توفره الخدمة: css .article-text { font-family: 'Roboto', sans-serif; }