הבנת עומק של גודל הגופן (PX לעומת EM לעומת REM)

הבנת גודל הגופן

גודל הגופן ממלא תפקיד חשוב מאוד ברשת, גודל הגופן הוא אחד ממאפייני ה- css. גודל הגופן או גודל הטקסט מגדירים הוא כמה גדול התווים המוצגים בדף אינטרנט. גופן נמדד בדרך כלל בנקודות (pt) ומגדיר בדרך כלל בפיקסלים (px).

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

1. גודל מוחלט או גודל יחסית
2. כאורך או אחוז (יחסית לגודל הגופן של אלמנט האב)

תחביר בסיסי

תחביר בסיסי של הגופן

גודל מוחלט
xx-small, x-small, small, xx-large, x-large, large
גודל גופן עם מילות מפתח בגודל מוחלט, יהיה גדול יותר או קטן יחסית לגודל הגופן של אלמנט האב.

גודל יחסית
קטן יותר, גדול יותר

אורך גודל
גודל הגופן המוגדר באורך תמיד יהיה ערך חיובי, ביחידות גופן יחסית המשמשות כמו em ו- px

אחוז גודל
גודל גופן עם אחוז יהיה תמיד ערך חיובי ויחס לגודל הגופן של אלמנט האב

הגדר גודל גופן בגוף

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

גודל גופן בפיקסלים (Px)

הגדרת גודל הגופן בפיקסלים אינה שיטה טובה. זה יהיה טוב רק אם אתה מנהל את העיצוב המושלם של הפיקסלים.
 Pixel (px) הוא ערך סטטי, px הוא עצמאי ומערכת הדפדפנים ההפעלה שמורה לדפדפנים להציג את האותיות בדיוק במספר הפיקסלים בגובה שציינת. התוצאות עשויות להשתנות מעט בכל הדפדפנים, מכיוון שכל דפדפן משתמש באלגוריתמים וגישה שונים כדי להשיג אפקט דומה.
 כשאתה מגדיר את גודל הגופן בפיקסלים (px), אתה עשוי להתמודד עם כתיבת כמה css נוספים לניהול הדף בתגובה. וצריך לכתוב את ה- css בכל נקודות הפסקה.

גודל גופן ב- EM

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

המרת פיקסלים ל- em

גודל גופן ב- REM

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

ההבדל בין אלמנטים מקוננים עם EM ו- REM

אלמנט מקונן עם EMאלמנט מקונן עם REM

עיין: https://developer.mozilla.org/en-US/docs/Web