يتم استخدام خاصية حجم الخط في CSS لتحديد ارتفاع الخط وحجمه. يؤثر على حجم نص العنصر. قيمته الافتراضية متوسطة ويمكن تطبيقها على كل عنصر. تشمل قيم هذه الخاصية XX-صغير , صغير , صغير جدًا ، إلخ.
بناء الجملة
font-size: medium|large|x-large|xx-large|xx-small|x-small|small|;
يمكن أن يكون حجم الخط نسبيًا أو مطلقًا.
الحجم المطلق
يتم استخدامه لضبط النص على حجم محدد. باستخدام الحجم المطلق، لا يمكن تغيير حجم النص في جميع المتصفحات. ومن المفيد أن نعرف الحجم المادي للإخراج.
الحجم النسبي
يتم استخدامه لتعيين حجم النص بالنسبة للعناصر المجاورة له. باستخدام الحجم النسبي، من الممكن تغيير حجم النص في المتصفحات.
ملاحظة: إذا لم نحدد حجم الخط، فبالنسبة للنص العادي مثل الفقرات، يكون الحجم الافتراضي هو 16 بكسل، وهو ما يساوي 1em.
حجم الخط بالبكسل
عندما نضبط حجم النص بالبكسل، فهذا يوفر لنا التحكم الكامل في حجم النص.
مثال
#first { font-size: 40px; } #second { font-size: 20px; } <p id="first">This is a paragraph having size 40px.</p> <p id="second">This is another paragraph having size 20px.</p> اختبره الآن حجم الخط مع م
يتم استخدامه لتغيير حجم النص. يفضل معظم المطورين في بدلاً من بكسل . يوصى به من قبل اتحاد شبكة الويب العالمية (W3C). كما هو مذكور أعلاه، حجم النص الافتراضي في المتصفحات هو 16 بكسل. لذلك، يمكننا أن نقول أن الحجم الافتراضي ل 1م يكون 16 بكسل .
صيغة حساب الحجم من بكسل ل في يكون م = بكسل/16 .
مثال
#first { font-size: 2.5em; /* 40px/16=2.5em */ } #second { font-size: 1.875em; /* 30px/16=1.875em */ } #third { font-size: 0.875em; /* 14px/16=0.875em */ } <p id="first">First paragraph.</p> <p id="second">Second paragraph</p> <p id="third">Third Paragraph.</p> اختبره الآن حجم الخط المستجيب
يمكننا ضبط حجم النص باستخدام أ وحدة فولكس فاجن ، والتي تعني ' عرض إطار العرض '. إطار العرض هو حجم نافذة المتصفح.
1vw = 1% من عرض إطار العرض.
اجتياز الطلب المسبق
إذا كان عرض إطار العرض 50 سم، فإن 1vw يساوي 0.5 سم.
مثال
الفقرة الأولى بعرض 5vw.
الفقرة الثانية بعرض 10vw.
اختبره الآنحجم الخط مع خاصية الطول
يتم استخدامه لضبط حجم الخط في الطول. يمكن أن يكون الطول بـ cm، px، pt، إلخ. القيم السالبة لـ طول الخاصية غير مسموح بها في حجم الخط.
بناء الجملة
font-size: length;
مثال
.length { color:red; font-size: 5cm; } <p class="length">A paragraph having length 5cm.</p> اختبره الآن