CSS – الخطوط Fonts

هناك العديد من الخصائص Properties التي تستطيع تغير شكل الخطوط. سنقوم باستعراضها.

في هذا الدرس سنضيف اطر CSS باستخدام طريقة التضمين embedding. وذلك لتسهيل الشرح، لكن دائما يفضل استخدام ملفات خارجية.

تحديد مجموعة الخط font-family

تستخدم الخاصية font-size لتغير مجموعة/عائلة الخط. عاددة ما تكون قيمة الخاصية اكثر من قيمة بحيث اذا كان المتصفح لا يدعم الاولى يختار الثانية ثم التالية …

<p id="id1">paragraph paragraph paragraph paragraph paragraph.</p>
<p id="id2">paragraph paragraph paragraph paragraph paragraph.</p>

#id1{
	font-family:"Times New Roman", Times, serif;
}

#id2{
	font-family:Arial, Helvetica, sans-serif;
}

الناتج

نلاحظ في المثال الفقرة الاولى اذا كانت مجموعة الخط تتكون من اكثر من اسم يفصل بينهما مسافة، نضعها بين علامة تنصيص 'Times New Roman'

تحديد حجم الخط font-size

تستخدم الخاصية font-size لتحديد حجم الخط.

<p style="font-size:20px;">paragraph paragraph paragraph paragraph paragraph.</p>
<p style="font-size:large;">paragraph paragraph paragraph paragraph paragraph.</p>

الناتج

تحديد طراز الخط font-style

تستخدم الخاصية font-style لتحديد طراز الخط.

<p style="font-style:italic;">paragraph paragraph paragraph paragraph paragraph.</p>

الناتج

تحديد سمك الخط font-weight

تستخدم الخاصية font-weight لتحديد سمك الخط.

<p style="font-weight:bold;">paragraph paragraph paragraph paragraph paragraph.</p>
<p style="font-weight:200;">paragraph paragraph paragraph paragraph paragraph.</p>

الناتج

تحديد طراز الخط font

تستخدم الخاصية font لتحديد كل الخواص السابقة في خاصية واحدة وذلك بأدخالهم بالترتيب الاتي.

1. font-style
2. font-variant
3. font-weight
4. font-size
5. font-family

<p style="font: italic small-caps bold 20px Arial, Georgia, serif;">paragraph paragraph paragraph paragraph paragraph.</p>

الناتج