الخطوط في لغة CSS الدرس |4|

الخطوط في CSS

في الدرس السابق تحدثنا عن الألوان و الصور.
في هذا الدرس سنتعلم كيفية تنسيق الخطوط بإستخدام css ,تُمكنك css بالتحكم بالخطوط من حيث الحجم و اللون ونوع الخط بإستخدام بعض الخصائص وهي:

font-family

font-style

font-variant

font-weight

font-size

font

الخصائص الذي نستخدمها مع الخطوط في CSS

كما عرفنا قبل قليل بأن للخطوط بعض الخصائص الذي تستخدم للتنسيق مثل الحجم و التنسيق...الخ.

خاصية font-family

هذه الخاصية تمكنك بوضع قائمة من الخطوط تُطبِّق على حسب الأولوية على عنصر ما, بمعنى إن لم يجد المتصفح الخط الأول سينتقل الى الثاني وهكذا لحين يجد الخط المناسب.
وتوجد انواع خطوط مثل tahome,times new roman,Arial هذه هي من أحد عائلة الخطوط الثالثة وهناك العديد من الخطوط في كل عائلة, دعونا نتحدث عن تلك العائلة وما الفرق بينهم.

times new roman,garamond,georgia

 تنتمي هذه الخطوط إلى عائلة serif كما تتميز تلك الخطوط بأنها تحتوي على زوائد في اطراف حروفها.

arial,rtebuchet,verdana

هذه الخطوط لا تحتوي على زوائد على أطرفها عكس الخطوط من عائلة serif وكما إن تلك الخطوط من عائلة sans-serif.

courier,courier new,andele mono

تنتمي تلك الخطوط الى عائلة monodpace وتتميز على إن لحروفها عرض موحد.

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

مثال

و تكون النتيجة في المتصفح بالشكل




في المثال السابق في العملية الأولى التي هي h1 نقول للمتصفح إن لم تجد نوع الخط الأول الذي هو verdana أذهب الى الخط الثاني الذي هو arial وإن لم تجد الخط استعمل خط من عائلة sans-serif .

وفي العملية الثانية التي هي h2 نقول للمتصفح إن لم تجد نوع الخط الأول الذي هو Times New Roman استعمل احد خطوط عائلة serif.

خاصية font-style

هذه الخاصية تستخدم في تنسيق الخط و تأخذ القيم

normal, italic, oblique

مثال

وسوف تكون النتيجة في المتصفح

خاصية font-variant

هذه الخاصية متعلقة في تبيين الخط وتأخذ القيم

normal, small, caps

وهي متعلقة في اللغات الأوربية, القيمة small-caps تعني بأن النص سيكتب بحروف كبيرة لكنها من ناحية الحجم صغير.

هذا الأمر ليس صعباً.

مثال

وسيكون في المتصفح بذلك الشكل

خاصية font-weight

هذه الخاصية تسمى بوزن الخط و هناك بعض القيم التي تستخدم مع هذه الخاصية و هي (bold, normal).
و هناك متصفحات تدعم استخدام الأرقام من 100 إلى 900.

مثال


 
وستكون النتيجة داخل المتصفح بذلك الشكل

خاصية font-size

تتحكم هذه الخاصية بحجم الخط كما يمكن تحديد الخط بالنسبة المئوية او البيكسل.

مثال

وسيكون الناتج في المتصفح بهذا الشكل

 

خاصية font

هذه الخاصية هي اختصار لكل الخصائص السابقة فيمكنك من خلال تلك الخاصية تجميع الخصائص السابقة في سطر واحد كما تحدثنا في الدرس السابق عن background فيمكنك اختصار العديد من سطور التنسيق في سطر واحد.

مثال




وستكون النتيجة في المتصفح بذلك الشكل