השתמש font-sizeבמאפיין CSS כדי לקבוע את גודל הטקסט שלך.
.container { font-size: 33px; } מאפיין זה לוקח מספר סוגים של ערכים:
- מילות מפתח (מילות מפתח בגודל מוחלט ובגודל יחסי),
- אורך (כגון פיקסלים (px) ויחידות em), ו-
- אחוזים.
.container { font-size: xx-large; } השאלה היא: איזה סוג ערך כדאי לבחור ולמה?
זו השאלה שבה מאמר זה מתמודד. זה יראה לך כיצד להשתמש font-sizeבנכס ואת ההבדלים בין הערכים הרבים שלו. לכן בפעם הבאה שתצטרך לשנות את גודל הגופן של הטקסט שלך, תדע לאיזה ערך להגיע.
ערכי מילות מפתח
ישנם שני סוגים של ערכי מילת מפתח שאתה יכול להשתמש עם גודל גופן: absolute-sizeו relative-sizeמילות מפתח. נתחיל במוחלט.
מילות מפתח בגודל מוחלט
הקוד שלמטה משתמש במילת המפתח בגודל מוחלט smallכדי לגדול את טקסט ה- HTML.
.childElement { font-size: small; } ישנן אפשרויות מילות מפתח בגודל מוחלט יותר לבחירה:
- xx-small
- x-small
- קָטָן
- בינוני
- גָדוֹל
- אקסטרה לארג
- xx-large
- xxx-large
הערך של מילת מפתח בגודל מוחלט נקבע על פי גודל הגופן המוגדר כברירת מחדל של הדפדפן. בדרך כלל, גודל זה בינוני.
מילות מפתח בגודל יחסית
מילות מפתח בגודל יחסי הן אפשרות נוספת שיש לקחת בחשבון. יש לך שניים לבחירה: smallerו larger.
.parentElement { font-size: smaller; } גודל הגופן של אלמנט עם מילת מפתח בגודל יחסי הוא יחסית - גדול או קטן יותר - לגודל הגופן של ההורה.
במילים אחרות, גודל הגופן של אלמנט ההורה משפיע על גודל הגופן של אלמנט הצאצא, כפי שניתן לראות בהמשך.
בדוגמה זו, מילת המפתח בגודל היחסי smallerמוחלת על אלמנט הצאצא, וערך הגודל המוחלט largeמוחל על אלמנט האב.
ערכי אורך
font-sizeמקבל מספר ערכי אורך שונים. נחקור שלושה מהם: פיקסלים (px) ויחידות em ו- rem. למרות בחירתך, ערך האורך שבו אתה משתמש חייב להיות חיובי.
.parentElement { font-size: 60px; } פיקסלים
פיקסלים הם יחידת אורך מוחלטת. כלומר, הם אינם מושפעים מאלמנטים אחרים, כמו אלמנט האב, או מגודל החלון.
כתוצאה מכך, פיקסלים מדויקים: אתה מגדיר את המספר המדויק של הפיקסלים שאתה צריך על אלמנט וזה בדרך כלל מה שאתה מקבל. עם זאת, יתכנו הבדלים קלים בין הדפדפנים.
שימו לב שאלמנטים הצאצאיים משתמשים pixelsבגודל גופן זהה במדגם הקוד לעיל.
EMs
אמנם אתה יכול לחשוב על פיקסלים כקבועים, אך חשוב על ערכי em כמשתנים.
הסיבה לכך היא שערכי em הם יחידת אורך יחסית. גודל הגופן של אלמנט המשתמש בערך em הוא יחסית לגודל הגופן של האב שלו.
עם זאת, נניח שלא הגדרת גודל גופן עבור רכיב האב. וגם לא הגדרת אחד אחר במקום גבוה יותר ב- DOM. במקרה זה, ערך em מחושב באמצעות ברירת המחדל של הדפדפן (לעיתים קרובות 16 פיקסלים).
בואו נעשה רעיון זה קונקרטי.
נניח שאלמנט האב מוגדר ל- 30 פיקסלים ואלמנט הצאצא מוגדר ל- 2 em. לאחר מכן, גודל הגופן המוצג של אלמנט הילד הוא 60 פיקסלים (2 x 30 פיקסלים = 60 פיקסלים). אתה יכול לראות תרחיש זה בקוד שלמטה.
ערכי em יכולים להיות בעייתיים בשל אפקט ההרכבה שלהם, מה שמודגם בדוגמה הבאה.
כאשר ישנם אלמנטים מרובים המשתמשים בערכי em המקוננים זה בזה, ערכי גודל הגופן מורכבים: הם הולכים וגדלים. זהו האפקט המרכיב בפעולה.
REMs
הזן ערכי rem, אשר נוצרו כדי להתמודד עם בעיית ההרכב של ems.
נזכיר כי ערכי em הם יחסית לאלמנט האב. לעומת זאת, ערכי rem הם יחסית לגודל הגופן של אלמנט השורש (html).
זה אומר שאתה יכול להחיל ערך rem על אלמנט, וזה לא יושפע מגודל הגופן של ההורה. זה מתחמק מהאפקט המורכב שחווינו לעיל.
דוגמה זו משתמשת font-sizeבמאפיין עם ערך rem.
הנה נקודה חשובה מהדוגמה לעיל: את גודל הגופן של אלמנט ההורה עושה לא משפיע על גודל הגופן של מרכיבי ילד.
אחוזים
האחוזים מציעים דרך אחת נוספת להגדיר את גודל הגופן ביחס לגודל הגופן של אלמנט האב.
האלמנט עם האחוז מתייחס לאלמנט האב שלו כדי לקבוע את גודל הגופן שלו. ערך האחוז חייב להיות חיובי.
הנה דוגמה.
כפי שאתה יכול לראות, בכל מה שקשור לגודל הגופן יש לך שפע של אפשרויות שיתאימו לצרכים שלך.
אני כותב על למידה לתכנת ועל הדרכים הטובות ביותר לעשות זאת ב- amymhaddad.com. אניגםמצייץ על תכנות, למידה ופרודוקטיביות: @ amymhaddad.