خاصية الوزن (font-weight)
تُحدد خاصية الوزن في CSS مدى سُمك أو نحافة أحرف النص. يمكن استخدام القيم الرقمية مع هذه الخاصية لتعيين سماكة النص. تتراوح القيم الرقمية من 100 إلى 900 وتقبل فقط مضاعفات 100. القيمة الافتراضية هي normal بينما القيمة الرقمية الافتراضية هي 400. أي قيمة أقل من 400 ستجعل النص يظهر أخف من الافتراضي، بينما أي قيمة رقمية أكبر من 400 ستظهر النص أكثر سُمكًا.
في المثال التالي، ستظهر جميع عناصر <p> بخط أكثر سُمكًا.
/* تحديد النص ليكون أكثر سُمكًا */
p {
font-weight: 700;
}خاصية النمط (font-style)
تحدد خاصية النمط في CSS نمط الخط الذي سيظهر به النص.
تقبل القيمة italic لجعل نمط الخط مائلًا.
.text {
font-style: italic;
}قاعدة @font-face
تسمح قاعدة @font-face في CSS باستيراد الخطوط الخارجية أو ملفات الخطوط مباشرةً في الأنماط. يجب تحديد موقع ملف الخط في قاعدة CSS حتى يتم تحميل الملفات من ذلك الموقع. تتيح هذه القاعدة أيضًا إضافة الخطوط المستضافة محليًا باستخدام مسار ملف نسبي بدلاً من عنوان URL ويب.
@font-face {
font-family: 'Glegoo';
src: url('../fonts/Glegoo-Regular.ttf') format('truetype');
}خطوط الاسترجاع (Fallback Fonts)
يمكن أن تحتوي خاصية font-family في CSS على عدة خطوط مُعَرَّفة بترتيب الأفضلية. في هذه الحالة، تُعرف الخطوط التي تلي الخط الأساسي بخطوط الاسترجاع.
إذا فشل تحميل القيمة الأساسية لخاصية font-family إلى صفحة الويب، فسيتم استخدام خطوط الاسترجاع.
/* هنا `Arial` هو خط الاسترجاع لعناصر <p> */
p {
font-family: "Helvetica", "Arial";
}خاصية ارتفاع الخط (line-height)
تحدد خاصية ارتفاع الخط في CSS التباعد الرأسي بين سطور النص. تقبل الأرقام بدون وحدات كنسبة (مثل 2) والأرقام المحددة بوحدات (مثل 12px) لكنها لا تقبل الأرقام السالبة. الرقم بدون وحدة هو قيمة مطلقة ستحسب ارتفاع الخط كنسبة إلى حجم الخط، ويمكن أن تكون الوحدة بأي وحدة CSS صالحة (مثل البيكسل، النسب المئوية، ems، rems، إلخ).
لتعيين ارتفاع الخط لعناصر <p> ليكون 10px، يمكن استخدام التصريح التالي في CSS.
p {
line-height: 10px;
}ربط الخطوط (Linking Fonts)
تسمح ربط الخطوط باستخدام خطوط الويب في المستند. يمكن استيرادها في مستند HTML باستخدام وسم <link>. بمجرد وضع عنوان URL لخط الويب داخل خاصية href، يمكن استخدام الخط المستورد في تصريح CSS.
<head>
<link href="https://fonts.googleapis.com/css?family=Droid%20Serif" rel="stylesheet">
</head>مراجع إضافية
للمزيد من المعلومات، يمكنك زيارة W3Schools أو MDN Web Docs.
هذا الدليل يغطي الأساسيات ويساعدك على البدء في تعلم CSS وتطبيقها على صفحات الويب الخاصة بك.