الدرس24 : تغيير حجم الخط في لغة css3

تغيير حجم الخط بلغة css3 :

كما سبق و دكرت فإن الديكورات لا علاقة لها ب html  فلتغيير حجم الخط نحتاج تطبيق نمط إسمه font-size هدا نمط css يسمح لنا بتغيير حجم الخط بطريقتين إتنتين:

-عن طريق الحجم المطلق: و ذلك بإعطائه قيم بالبيكسل px أو السنتمتر cm أو الملمتر mm. لا أنصح كتيرا بهذه الطريقة لأنها تظهر الخط صغيرا في بعض المتصفحات.

-عن طريق الحجم الغير مطلق : تكون بالنسبة , em أو ex , و هي جيدة لأنها تتماشا مع معضم أحجام الشاشات. و هكذا سيسهل على الزائر قراءة المواضيع.

طريقة الحجم المطلق:

لإختيار الحجم هنا عادة نستعمل البيكسيل px متلا لجعل إرتفاع الخط 16px نكتب الكود التالي:

font-size: 16px;

سيصبح إرتفاع الخط 16px كما تبين الصورة التالية:

لو وضعت الكود التالي في صفحتك css. ستلاحظ التغيير:

p{
font-size: 14px; /* Paragraphes de 14 pixels */
}h
1
{
font-size: 40px; /* Titres de 40 pixels */
}

لاحظ معي النتيجة:

يمكنك أيضا تبديل البيكسل بالملمتر أو السنتمتر كما دكرت في أول الدرس.

طريقة الحجم الغير مطلق:

هده الطريقة جميلة تمكن من عرض الكتابة بطريقة أحسن رغم تغير حجم الشاشة.

توجد طرق عديدة في هذه الخاصية و جميلة. أول طريقة سندكر هي طريقة تحديد الحجم بكلمات إنجليزيةمتل هذه :

xx-small : تسمى minuscule لا أعرف إسمها بالعربية.

x-small : صغير جدا .

small : صغير .

large : كبير .

x-large : كبير جدا.

xx-large : كبير جدا جدا.

و يمكنك تجربتها بالكود التالي:

p{
font-size: small;
}h1
{
font-size: large;
}

لكن لن نعمل بهذه الخاصية لأنها تحتوي على سبع كلمات فقط. لاكن توجد طريقة أخرى و هي إختيار الحجم ب em .عند 1em فإن الخط يكون عادي. أكبر من واحد متلا 1.5em يكون الخط كبير, أصغر من واحد ك 0.6em يكون النص صغير. بين الرقمين تكون نقطة و ليست فاصلة.لتجربة هذه الطريقة يمكنك إستعمال الكود التالي:

p{
font-size: 0.8em;
}h
1
{
font-size: 1.3em;
}

كما يمكنك إستعمال طرق أخرى ك ex و النسبة 60% , 90%... لأي سؤال إستفسار أو تشجيع ننتظر تعليقاتكم وشكرا.