HTML - CSS Fonts الخطوط
الخطوط في HTML باستخدام CSS (CSS Fonts)
الخطوط (Fonts) تلعب دورًا مهمًا في تحسين جاذبية الصفحة وتجربة المستخدم. في HTML، يتم التحكم بالخطوط باستخدام CSS.
🔠 أهم خصائص CSS الخاصة بالخطوط:
font-family: لتحديد نوع الخطfont-size: لتحديد حجم الخطfont-weight: لتحديد سمك الخطfont-style: لتحديد نمط الخط (عادي، مائل...)line-height: لتحديد ارتفاع السطرfont: اختصار لتجميع خصائص الخط في سطر واحد
🧪 مثال لاستخدام خصائص الخط:
p {
font-family: Arial, sans-serif;
font-size: 18px;
font-weight: bold;
font-style: italic;
line-height: 1.6;
}
⬅ هذا الكود يطبق إعدادات مخصصة على كل فقرة <p>.
🌐 استخدام خطوط Google Fonts:
يمكنك استيراد خطوط احترافية من Google Fonts لإعطاء مظهر عصري لصفحتك.
🔹 خطوات استخدام Google Fonts:
- اذهب إلى fonts.google.com
- اختر الخط الذي تريده (مثلاً: Cairo)
- انسخ رابط الخط وضعه داخل <head>
- استخدم اسم الخط في
font-family
✅ مثال كامل:
<head>
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Cairo', sans-serif;
}
</style>
</head>
⬅ الخط "Cairo" سيُستخدم لعرض النصوص في الصفحة.
💡 ملاحظات مهمة:
- استخدم fallback fonts:
font-family: 'Cairo', sans-serif; - يفضل استخدام حجم الخط بوحدة
remأوemلجعل الموقع مرنًا - قلل من عدد الخطوط المستوردة لتحسين سرعة الصفحة
- لإضافة خطوط غير موجودة في Google، يمكنك استخدام
@font-face
تعليقات
إرسال تعليق