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

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

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

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


لغة CSS مذهلة ، تستطيعون أن تفعلوا بها كل ما يمر بمخيّلتكم في عالم التصميم . و أنتم تسيرون بخطى ثابتة نحو امتلاك جل أسرارها . بنهاية هذا الدرس ستنجلي أغلب معاناتكم في التعامل مع الخط ، هذا الدرس هو تكملة للدرس السابق حول خصائص CSS التي تعمل على تنسيق الخط . سنحاول التعرف على أغلبها و أهمها


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

الخاصية font-weight

تقوم الخاصية font-weight بتحديد سُمك الخط ، و يمكننا إعطاءها نوعين من القيم : قيم نسبية و قيم رقمية

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

و هي قيمتان لا غير :
bold : تضخيم الخط .
normal : خط عادي .

.samik{
  font-weight: bold;
}
.tabi3i {
  font-weight: normal;
}
مشاهدة النتيجة

القيم الرقمية

توفر لنا 9 قيم . تبدأ برقم 100 و تنتهي برقم 900 .
الرقم 400 يساوي القيمة النسبية "normal".
الرقم 700 يساوي القيمة "bold"
الأعداد المستعملة هي (100, 200, 300, 400, 500, 600, 700, 800, 900)
مثال الإستعمال :

.samik{
  font-weight: 700;
}
.tabi3i{
  font-weight: 400;
}
قد يذهب تفكيركم إلى أن مثل هذا التصرف الذي تحدثه خاصية font-weight عند إعطائها القيمة bold . شبيه بتصرف الوسم <strong> ، لا تقوموا أبدا بهذا الخلط . تذكّروا بأن الوسم strong موجه لتسهيل عمل آليات محرّكات البحث ك google و bing... فهو وسم جد مهم ، لا تبذّروا استعماله يمينا و شمالا . بل إلاّ إذا كانت أهمية النص تستحق ذلك .
لتضخيم الخط فقط ، اتستعملوا خاصية font-weight .

الخاصية font-style

هذه الخاصية تحمل قيمتين فقط :

italic أو oblique : . خط مائل
normal : خط عادي

.ma2il{
  font-style: italic;
}
.tabi3i {
  font-style: normal;
}
مشاهدة النتيجة
نفس الشيء بالنسبة للتحذير السابق : لا تخلطوا بين وظيفة الوسم em و القيمة italic .
من فضلكم ، الوسم em لإضفاء الأهمية على النص . أما font-style هي التي يجب استعمالها للحصول على نمط الخط المائل


الخاصية font-family

تتيح لنا هذه الخاصية اختيار العائلة التي ينتمي إليها الخط . لا مجال لحصر عدد هذه العائلات ، فهي كثيرة . و أغلبكم سبق لهم أن تعاملوا مع بعضها في برنام WORD أو excel أو Photoshop ...إلخ . ومن أشهرها نجد : Times New Roman , Arial, Arabic Transparent...إلخ .
لاستعمال خاصية font-family نضيف إليها عائلة الخط كقيمة : إليكم مثال لبعض العائلات

.andalossi {
   font-family: Andalus;
}
.arabic {
   font-family: 'Arabic Transparent'; // نكتب القيم المركبة بين هلالين
} 
.times_new {
   font-family: "Times New Roman";   // أو مزدوجتين 
}
.arial {
   font-family:Arial;
}
.courier {
   font-family: 'Courier New';
}
.comic {
   font-family: 'Comic Sans Ms';
}
.georgie {
   font-family: Georgia;
}
.impacts {
   font-family: Impact;
}
.verde {
   font-family: Verdana;
}
.trebuchet {
   font-family: 'Trebuchet MS';
}
مشاهدة النتيجة

جميع عائلات الخط التي تستعملونها بهذه الطريقة موجودة على حاسوبكم . لمستعملي الويندوز مثلا ، يمكنكم إلقاء نظرة عليها ، ستجدونها في القرص الصلب "C:\WINDOWS\Fonts" . هذه هي العائلات التي تظهر لكم في برنام WORD أو EXCEL أو PHOTOSHOP ...إلخ

الخطب الوحيد هو أن هذه الأنواع ليست متوفرة عند الجميع . فعائلات الخط المستعملة في حاسوب Macintosh أو Amiga ليست هي عند مستخدمي الويندوز . أو توجد باسم مغاير مثلا 'Times New Roman' المستعملة في الويندوز ، هي نفسها المستعملة في MacOs لكن باسم مغاير :Time. إذاً حتى نتفادى الحصول على نتائج غير مرغوب فيها ، يمكننا وضع أكثر من عائلة في نفس الخاصية

استعمال أكثر من قيمة واحدة

حتى نتأكد من وجود عائلة واحدة على الأقل عند الجميع ، نقوم بإضافة مجموعة من العائلات للخاصية font-family . مثال :

p
{
  font-family :Arial, 'Arabic Transparent', 'Comic Sans MS','Times New Roman',Serif;
}

نكتب عدد العائلات الذي نريده ، مع الفصل بينها بعلامة , . كما يجب وضع الكلمات المُرَكّبة بين المزدوجتين " " أو الهلالين '' مثلا :
'Arabic Transparent'.
بهذا يقوم المتصفّح بتحميل النوع الأول الذي اخترناه وهو Arial من حاسوبكم ، إن لم يجده يقوم بالبحث عن النوع الثاني و هكذا دواليك حتى يجد النوع الذي يطابقه . و نختم غالبا بنوع Serif المتواجد عند الجميع .

حدود اختيار عائلات الخط ، لا تقف هنا . فرغم كثرتها لكن في بعض الأحيان ، قد نود استعمال عائلة غير موجودة على جميع أنظمة الإستغلال . الحل هو استعمال خاصية أخرى ، تسمّى font-face

الخاصية font-face@

تمكننا هذه الخاصية من استعمال عائلات الخط الموجودة على الويب . كل ما علينا ، هو البحث عن العائلة التي توافق نمط موقعنا ، ثم استعمالها مباشرة و ذلك بإضافة رابطها إلى الخاصية font-face
توجد مواقع كثيرة توفر عددا هائلا من عائلات الخط . بعضها مجاني و البعض الآخر يخضع لحقوق الملكية .
طريقة الإستعمال :

@font-face {
  font-family: myFont;
  src: url(http://example.com/fonts/Gentium.woff);
}
h1 {
  font-family: myFont;
}

أولا نبدأ بكتابة font-face@ و داخل اللاّمتين "{}" . نستعمل الخاصية font-family و نعطيها في القيمة أي إسم نريده .
ثم نكتب الرابط إلى المكان الذي حمّلنا فيه عائلة الخط .
لتطبيق عائلة الخط الجديدة على أي عنصر من النص . نكتب الخاصية font-family و نعطيها الإسم الذي اخترناه ، في مثالنا هو "myFont"

التطبيق

هذا مثال لموقع يحتوي على بعض الخطوط العربية : http://cooltext.com/Fonts-Unicode-Arabic . قوموا بتحميل العائلة التي تودّونها ، و حفظها في مجلد موقعكم مثلا "site" .
بالنسبة إلي ، وقع اختياري على عائلة "Old Antic Outline"
للإستعمال ، نتبع الطريقة أعلى :

@font-face {
  font-family: 'Oldanout';
  src: url('Oldanout.ttf');
}
h1{
   font-family: Oldanout;
}

قوموا بالتجربة ، في مثالي ستحصلون على خط شبيه بالتالي :


في مثالنا حمّلنا مستند عائلة الخط بامتداد .ttf . اعلموا بوجود صيغ أخرى منها : .woff , .eot, .otf
مثلا internet explorer9 لا تتعرّف إلا على صيغة "eot." بخلاف المتصفّحين الآخرين .
لن أدخل في التفاصيل . ستكون لدينا فرص أخرى لإضافة بعض المعلومات