CSS: font Style
-
التحكم في نمط Style الخط في CSS سهل جدا،
تمام خلونا نعمل مثال حتى نفهم الموضوع بشكل أفضل:
نبدأ بإنشاء ملف HTML باسم TextFontStyle وبعدها نضيف الكود التالي:
<!DOCTYPE html>
<html>
<style>
h1 {
font-family: "Times New Roman", Times, serif;
font-style: italic;
}
</style>
<body>
<html><h1>مرحبا بكم </h1></div>
</body>
</html>
شغل الصفحة ونشوف النتيجة (الصورة)
طيب نفهم الكود:
الكود التالي :
h1 {
font-family: "Times New Roman", Times, serif;
font-style: italic;
}يتم تطبيق نوع الخط Times New Roman على h1 elements الموجودة في صفحة HTML ، وفي السطر الثاني يتم تطبيق النمط style المائل italic
تمام طريقة الكتابة بتكون بالشكل:
font-style: value
القيم الي مكن تطبيقها باستخدام style هي :
⦁ normal : لا يتم تطبيق أي تأثيرات على النص
⦁ italic: تطبيق النمط مائل على النص
⦁ oblique: هذه الخاصية مشابه تمام لخاصية المائل لكن اقل دعم
Font Variant
في هذه الخاصية يمكن التحكم بالنص بحيث يتم تطبيق الخاصية small-caps لتحويل النص الى احرف كبيره.
تمام طريقة الكتابة بتكون بالشكل:
font-variant: value
القيم الي مكن تطبيقها باستخدام style هي :
⦁ normal : لا يتم تطبيق أي تأثيرات على النص
⦁ small-caps : يتم تطبيق الخاصية small-caps
طيب السؤال ماذا لو كانت الاحرف كبيرة في الأصل : في هذه الحالة يتم تحويل جميع الاحرف الى حالة احرف كبيرة مع تميز الاحرف التي كانت بحجم صغير لتكون اقل حجما .
مثال :
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;;
}
</style>
</head>
<body>
<h1>The font-variant property</h1>
<p class="normal">My name is Devkum.</p>
<p class="small">My name is Devkum.</p>
</body>
</html>
Font Weight
في هذه الخاصية يمكن التحكم weight للنص بحيث يمكن تطبيق خط عريض .
تمام طريقة الكتابة بتكون بالشكل:
font-weight: value
القيم الي مكن تطبيقها باستخدام style هي :
⦁ normal : لا يتم تطبيق أي تأثيرات على النص
⦁ bold : خط عرض
⦁ Bolder : خط اعرض من bold
⦁ Lighter : تطبيق وزن اخف من parent element
⦁ قيمة معينة بالبيكسل :تشمل القيم ( 100, 200, 300, 400, 500, 600, 700, 800, 900) بحيث 100 is the lightest, 900 is the boldest.
400 = normal, and 700 = bold
<!DOCTYPE html>
<html>
<style>
p.normal {
font-family: "Times New Roman", Times, serif;
font-weight: normal;
}
p.bold {
font-family: "Times New Roman", Times, serif;
font-weight: bold;
}
p.bolder {
font-family: "Times New Roman", Times, serif;
font-weight: bolder;
}
p.lighter {
font-family: "Times New Roman", Times, serif;
font-weight: lighter;
}
p.fixed {
font-family: "Times New Roman", Times, serif;
font-weight: 900;
}
</style>
<body>
<html><p class="normal">مرحبا بكم </p><p class="bold">مرحبا بكم </p><p class="bolder">مرحبا بكم </p><p class="lighter">مرحبا بكم </p><p class="fixed">مرحبا بكم </p></div>
</body>
</html>
شغل الصفحة وبتكون النتيجة :
اترك تعليقك