המאפיין font-size ב-CSS משמש לציון הגובה והגודל של הגופן. זה משפיע על גודל הטקסט של אלמנט. ערך ברירת המחדל שלו הוא בינוני וניתן להחיל אותו על כל אלמנט. הערכים של נכס זה כוללים xx-קטן , קָטָן , x-קטן , וכו.

תחביר

 font-size: medium|large|x-large|xx-large|xx-small|x-small|small|; 

גודל הגופן יכול להיות יחסי או מוחלט.

בגודל מוחלט

הוא משמש כדי להגדיר את הטקסט לגודל מוגדר. באמצעות גודל מוחלט, לא ניתן לשנות את גודל הטקסט בכל הדפדפנים. זה יתרון כאשר אנו יודעים את הגודל הפיזי של הפלט.

בגודל יחסי

הוא משמש להגדרת גודל הטקסט ביחס לאלמנטים השכנים שלו. עם גודל יחסי, ניתן לשנות את גודל הטקסט בדפדפנים.

הערה: אם לא נגדיר גודל גופן, אז עבור הטקסט הרגיל כגון פסקאות, גודל ברירת המחדל הוא 16px, השווה ל-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> 

גודל גופן עם em

הוא משמש לשינוי גודל הטקסט. רוב המפתחים מעדיפים ב במקום פיקסלים . הוא מומלץ על ידי קונסורציום האינטרנט העולמי (W3C). כפי שצוין לעיל, ברירת המחדל של גודל הטקסט בדפדפנים הוא 16 פיקסלים. אז, אנחנו יכולים לומר כי גודל ברירת המחדל של 1em הוא 16 פיקסלים .

הנוסחה לחישוב הגודל מ פיקסלים ל ב הוא em = פיקסלים/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> 

גודל גופן רספונסיבי

אנו יכולים להגדיר את גודל הטקסט באמצעות a יחידת vw , המייצג את ' רוחב יציאת התצוגה '. נקודת התצוגה היא בגודל של חלון הדפדפן.

1vw = 1% מרוחב יציאת התצוגה.

אם רוחב יציאת התצוגה הוא 50 ס'מ, אז ה-1vw שווה ל-0.5 ס'מ.

דוגמא

פסקה ראשונה ברוחב של 5vw.

פסקה שנייה בעלת רוחב של 10vw.

גודל גופן עם מאפיין האורך

הוא משמש להגדרת גודל הגופן באורך. האורך יכול להיות בס'מ, px, pt וכו'. ערכים שליליים של אורך מאפיינים אינם מותרים בגודל גופן.

תחביר

 font-size: length; 

דוגמא

 .length { color:red; font-size: 5cm; } <p class="length">A paragraph having length 5cm.</p>