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

אלה כמה מאפייני גופן חשובים:

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

1) צבע גופן CSS

צבע גופן CSS הוא תכונה עצמאית ב-CSS למרות שנראה שהוא חלק מגופני CSS. הוא משמש לשינוי צבע הטקסט.

ישנם שלושה פורמטים שונים להגדרת צבע:

• לפי שם צבע
• לפי ערך הקסדצימלי
• על ידי RGB

בדוגמה לעיל, הגדרנו את כל הפורמטים הללו.

 body { font-size: 100%; } h1 { color: red; } h2 { color: #9000A1; } p { color:rgb(0, 220, 98); } } <h2>This heading is shown in serif.</h2> <p>This paragraph is written in monospace.</p> 

תְפוּקָה:

 <h2>This heading is shown in sans-serif.</h2> <h3>This heading is shown in serif.</h3> <p>This paragraph is written in monospace.</p> 

3) גודל גופן CSS

מאפיין גודל גופן CSS משמש לשינוי גודל הגופן.

אלה הערכים האפשריים שניתן להשתמש בהם כדי להגדיר את גודל הגופן:

 Practice CSS font-size property <p> This font size is extremely small.</p> <p> This font size is extra small</p> <p> This font size is small</p> <p> This font size is medium. </p> <p> This font size is large. </p> <p> This font size is extra large. </p> <p> This font size is extremely large. </p> <p> This font size is smaller. </p> <p> This font size is larger. </p> <p> This font size is set on 200%. </p> <p> This font size is 20 pixels. </p> 

תְפוּקָה:

שיטת java tostring

גודל גופן זה קטן במיוחד.

גודל גופן זה קטן במיוחד

גודל גופן זה קטן

גודל גופן זה בינוני.

גודל גופן זה גדול.

גודל גופן זה גדול במיוחד.

גודל גופן זה גדול במיוחד.

גודל גופן זה קטן יותר.

גודל גופן זה גדול יותר.

גודל גופן זה מוגדר על 200%.

ארוחת ערב לעומת זמן ארוחת ערב

גודל גופן זה הוא 20 פיקסלים.

4) סגנון גופן CSS

מאפיין CSS Font style מגדיר איזה סוג של גופן ברצונך להציג. זה עשוי להיות נטוי, אלכסוני או רגיל.

 body { font-size: 100%; } h2 { font-style: italic; } h3 { font-style: oblique; } h4 { font-style: normal; } } <h2>This heading is shown in italic font.</h2> <h3>This heading is shown in oblique font.</h3> <h4>This heading is shown in normal font.</h4> 

תְפוּקָה:

 <h2>This heading is shown in italic font.</h2> <h3>This heading is shown in oblique font.</h3> <h4>This heading is shown in normal font.</h4> 

5) וריאנט גופן CSS

מאפיין וריאנט גופן CSS מציין כיצד להגדיר וריאנט גופן של אלמנט. זה עשוי להיות רגיל וקטנות.

 p { font-variant: small-caps; } h3 { font-variant: normal; } <h3>This heading is shown in normal font.</h3> <p>This paragraph is shown in small font.</p> 

תְפוּקָה:

 <h3>This heading is shown in normal font.</h3> <p>This paragraph is shown in small font.</p> 

6) משקל גופן CSS

מאפיין משקל גופן CSS מגדיר את משקל הגופן ומציין עד כמה הגופן מודגש. הערכים האפשריים של משקל גופן עשויים להיות רגילים, מודגשים, נועזים יותר, קלים יותר או מספרים (100, 200..... עד 900).

הגופן הזה מודגש.

הגופן הזה מודגש יותר.

הגופן הזה בהיר יותר.

משקל הגופן הזה הוא 100.

משקל הגופן הזה הוא 200.

משקל הגופן הזה הוא 300.

פקודת החזרה של java

משקל הגופן הזה הוא 400.

משקל הגופן הזה הוא 500.

משקל הגופן הזה הוא 600.

משקל הגופן הזה הוא 700.

משקל הגופן הזה הוא 800.

משקל הגופן הזה הוא 900.

ssh טופס מלא

תְפוּקָה:

הגופן הזה מודגש.

הגופן הזה מודגש יותר.

הגופן הזה בהיר יותר.

משקל הגופן הזה הוא 100.

משקל הגופן הזה הוא 200.

משקל הגופן הזה הוא 300.

משקל הגופן הזה הוא 400.

משקל הגופן הזה הוא 500.

משקל הגופן הזה הוא 600.

משקל הגופן הזה הוא 700.

משקל הגופן הזה הוא 800.

משקל הגופן הזה הוא 900.