CSS تنسيق المحتوى

CSS خاصيات تنسيق الخط : (1/2) font

آخر تحيين: 04-01-2015

CSS خاصيات تنسيق الخط : (2/2) font CSS الإستئناس


خاصيات الخط متنوعة ، و تمكننا من التحكم التام في طريقة عرض الخط ، من اختيار حجمه و عائلته و نوعه ... :

خاصيات تنسيق الخط
الخاصياتالمعنى
font-sizeحجم الخط
font-weightتضخيم الخط
font-styleنمط الخط
font-familyعائلة الخط

font-size

لتغيير طول الخط نستعمل الخاصية : font-size . لكن كتابة الخاصية بهذه الطريقة لن تفي بالغرض ، يجب إضافة قيمة لها كما عهدتم . و موضوع هذه الفقرة سيدور حول القِيم التي يمكننا استعمالها . و هي متعددة ولكل فعاليتها .
مثلا إذا أردت أن يكون الخط بطول (16 سنتمتر) ، سأضيف قيمة 16cm للخاصية font-size :
font-size: 16cm; بالإضافة إلى هذه القيمة بالسنتميتر و القليلة الإستعمال! نجد أنواعا أخرى و هي

  • بالبيكسل "px"
  • القيم النسبية
  • بالنسبة المؤية (%)
  • برمز : em

في جميع الأمثلة التالية ، لن أعيد كتابة شيفرات HTML ، . لتطبيق شيفرات CSS قوموا بإنجاز صفحة HTML بأنفسكم ، و أضيفوا إليها ما يحلو لكم من الوسوم لستم محتاجين الآن لعوني لقد أصبحتم ملوك هذه اللغة مع وقف التّنفيذ

أ : بالقيم النسبية

في هذه الحالة قِيَم font-size ليست محددة برقم أو رمز . بل بأسماء متعارف عليها . مثلا ، إذا أردنا لخطنا أن يكون صغيراً : نكتب بكل بساطة font-size: صغير; أو كبيراً font-size: كبير;
العملية يسيرة مع فارق بسيط ، طبعاً لن نكتب القيم بالعربية بل باللغة الإنجليزية ، لا تقلقوا فلن أطلب منكم تعلّمها حتى تتمكنوا من متابعة الدّرس . هي كلمات بسيطة سأضع شرحاً أمام كل مصطلح

  • xx-small : جد جد صغير
  • x-small : جد صغير
  • small : صغير
  • medium : متوسط
  • large : كبير
  • x-large : كبير جدّاً
  • xx-large : عملاق

مثال الإستعمال :

.minuscule        /* جد جد صغير*/
{
   font-size: xx-small;
}
.trespetit        /* جد صغير */
{
   font-size: x-small;
}
.petit            /* صغير */
{
   font-size: small;
}
.moyen         /* متوسط */
{
   font-size: medium;
}
.grand       /* كبير */
{
   font-size: large;
}
.tresgrand     /* كبير جدّاً */
{
   font-size: x-large;
}
.geant       /* عملاق */
{
   font-size: xx-large;
}
مشاهدة النتيجة
استعمال القيم النسبية ، طريقة جيدة لتحديد حجم الخط . إذ يتم عرضه بنفس الحجم على أغلب المتصفحين ، لكن تبقى إمكانياتها جد محدودة ، إذ لا توفّر لنا إلا 7 قيم ، خلاف الطرق الأخرى

ب : إضافة القيمة بالبيكسل "px"

لتحديد طول الخط باستعمال قيمة البيكسل (pixel) . نكتب الخاصية font-size ثم نحدد عدد البيكسلات التي نريدها : font-size: 16px; صورة توضيحية للبيكسيل :



مثال الإستعمال :

p {
   font-size:24px ;  
}
مشاهدة النتيجة
إذا لم تُحدّدوا أي قيمة لحجم الخط على صفحتكم ، فمتصفّحكم سيقوم بعرض القيمة التلقائية و التي تساوي 16px

ت : إضافة القيمة بالنسبة المؤية (%)

هذه الطريقة جد سهلة أيضاَ ، فالطول العادي للخط نعطيه قيمة 100% ، و يمكنكم أن تنقصوا أو ترفعوا هذه النسبة كما تشاؤون .حسب الطول الذي ترغبونه .(130% أو 82% ...إلخ) . مثال :

    body{font-size: 100%;}

ث : إضافة القيمة برمز : em

الطول العادي للخط هو 1em ما يساوي 16px . إذا كتبت "2em" ، هذا يعني ضعف الحجم التلقائي أي 32px .
.لهذا سنستعمل الأعداد العشرية لرفع أو خفض القيمة لأنها جد حساسة ففارق الطول مثلا بين 1em و 2em كبير جدّا . و لهذا حتى يكون التحديد أكثر دقة ، كان لا بد من هذه الأعداد . مثال :

font-size: 1.5em;

1.5em تساوي 24px . لقد حصلت على هذا العدد بالقيام بعملية حسابية : 1m تساوي 16px و نصف em هو 8px.
و الآن لو أردت خطي بحجم 14px باستعمال القيمة em ؟ وجب علي القيام أيضا بعملية حسابية و سأجد بأن المقابل هو 0.875em . صدقوني ، لقد قمت بهذه العملية على الآلة الحاسبة . لأسهل عليكم الأمر سأريكم تقنية جيدة للتحكم في استعمال القيمة em ، دون اللجوء إلى جدول الضرب :

نقوم أولا بتحديد حجم خط صفحتنا بالنسبة المئوية . وذلك بإعطاء الوسم body حجم 62.5% و هذه النسبة تساوي بالضبط 10px .
بهذا لاحقا إذا أردت مثلا إعطاء الفقرات حجم 14px سأكتب 1.4em . أو 16px سأكتب 1.6em . أظن أنكم فهمتم المغزى ، لتحويل القيمة من البيكسل إلى em نضيف نقطة بعد الرقم الأول .

جميع الطرق التي رأيناها جيدة للإستعمال . لكن يُنصح كثيرا باستعمال النسب المئوية و طريقة em . يصعب علي إعطائكم الأسباب هنا ، لأنها بكل بساطة لا يمكن تحديدها ، فهي خاصة بكم و بما تودّون فعله بالضبط . و سألقي بعضا من الضوء على هذا الجانب مع تقدمنا في الدّروس .
إذا لم تُحدّدوا أي قيمة لحجم الخط على صفحتكم ، فمتصفّحكم سيقوم بعرض القيمة التلقائية و التي تساوي 16px

هناك طرق أخرى أقل استعمالا . مثلا pt و inc و pc إلخ ...