מאפייני הגופן ב CSS נועדו לשלוט על הגופן עצמו. עיצוב האתר באמצעות הגופן הוא נפוץ ביותר, ועל כן חשוב.
בין התכונות של פונטים (גופנים) נחלקים לשבעה:
Font-family
סוג הגופן: רשימה של סוגי גופנים מופרדים בפסיקים. רושמים מספר גופנים מפני שלא בכל מחשב מותקנים כל הגופנים.
הדפדפן משתמש בגופן הראשון מתוך הרשימה שמותקן גם במחשב הלקוח. אם אף אחד מהגופנים המבוקשים לא קיים, ישתמש הדפדפן
בגופן ברירת המחדל של הדפדפן. מסיבה זו, כדאי לבדוק את תצוגת הדף עם מספר פונטים רבים ככל האפשר ולמצוא ולכתוב לפי סדר
את המתאימים ביותר. כמובן שגופנים המכונים בשם בעל יותר ממילה אחת חייבים להיות מוקפים במרכאות (או גרשיים).
font-size
גודל הגופן: את גודל הפונט אפשר להגדיר באופן אבסולוטי או יחסי.
Font-weight
היא תכונה המאפשרת לעבות את האותיות. ערך ברירת המחדל הוא normal אולם ניתן לתת את הערך bold כדי לקבוע אות עבה או להשתמש בערכים היחסיים bolder או lighter באופן יחסי לאלמנט ההורה. במקום מילים, אפשר להשתמש במספרים: 100 הוא העדין ביותר, 900 הוא המודגש ביותר. 400 הוא הערך הרגיל, ו-700 הוא הערך הקבוע כ-bold.
Line-height
היא גובה שורת האותיות, ומיוצגת באמצעות מידת אורך כמוזכר לעיל. לתכונה זו אפשר לתת ערכים מספריים, אחוזים, או יחסיים (2pt+).
font-variant
נתמכת רק על ידי אקספלורר עליו השלום ויכולה לקבל שני ערכים: normal ו- small-caps. האפשרות האחרונה הופכת את האותיות הכתובות לאותיות גדולות (מa לA).
font-stretch
תכונה אחרת ופחות מוכרת (משום שרוב הדפדפנים אינם תומכים בה עדיין) היא font-stretch. תכונה זו מאפשרת להציג את האותיות מכווצות או רחבות לפי בחירתך. ניתן לשים את הערכים:
Ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded.
Font-size-adjust
היא תכונה המעניקה פרופורציה שונה של יחסי רוחב/גובה לאותיות. מה חבל שגם תכונה זו אינה נתמכת על ידי אף אחד מהדפדפנים.
פעמים רבות אנו נותנים ערכים ליותר מתכונה אחת של גופן.
סדר כתיבת הדברים מאוד חשוב, ראשית יש לציין את הערכים: style, weight, variant.
שנית באים font-size וכן line-height, מופרדים בקו נטוי /.
לבסוף רשימת סוגי הגופן הרצויים.
מבין כל התכונות גודל הגופן (font-size) וכן משפחות הגופן (font-family) חייבים להיות בהגדרת תכונות font.
מאפיין: גודל הגופן
המאפיין האחראי על גודל הגופן הוא font-size.
גודל הגופן נקבע באחת משתי דרכים – גודל מוחלט או גודל יחסי.
גודל מוחלט
גודל הגופן נקבע ע"י מידות ידועות: פיקסלים (px), נקודות (pt) ומידות אורך (cm, mm, in). היתרון של השימוש בגודל מוחלט הוא בנוחיותו – מידות ברורות וידועות
הערה: השימוש בנקודות, מקביל לגדלים המקובלים במעבדי תמלילים. הבעייה ביחידות מידה אלה שהן תלויות ברמת הרזולוציה של מערכת ההפעלה. בגלל השוני שברמות אלו (למשל בין מקינטוש לחלונות), גודל האותיות ביחס לאלמנטים אחרים במסך, נראה שונה במחשבים השונים. על כן מומלץ לעבוד עם פיקסלים.
החיסרון של מידות מוחלטות: שינוי גודל הטקסט בדפדפן מוגבל במצב זה לחלק מהדפדפנים. אינטרנט אקספלורר למשל, לא יכול לשנות את גודל הטקסט כאשר זה קבוע במידות מוחלטות. (יש לו אפשרות של זום, אבל אז לא רק הטקסט משתנה).
ברירת המחדל של הדפדפנים: כאשר לא קובעים גודל לגופן, הוא יקבל את הגודל 16px.
גודל יחסי
rem היא יחידה מידה מכפילה לגודל פונט ברירת המחדל של ה-root במסמך, במילים אחרות ופשוטות יותר, של אלמנט ה-html שלנו.
כברירת מחדל, גודל הפונט של המסמך שלנו הוא 16px ולכן 1rem שווה ל-16px.
p { font-size: 1.5rem; }
p { font-size: 1rem; } ייתן לנו פונט בגודל 24 פיקסלים
em
היא יחידת מידה אשר מאוד דומה בהתנהגותה ל-rem אך עם הבדל משמעותי אחד. אם rem "מכפיל" את גודל הפונט המוגדר ב-html אז em "מכפיל" את גודל הפונט המוגדר באלמנט האב.
אם לא ניתן כל ערך לגודל הגופן, הערך המחושב של הגופן (בפיקסלים), יהיה הכפלת ערך ה-em ב-16.
למשל 1.25em יציג גופן בגודל השווה ל-20px.
יחידות מידה viewport
(viewpost width=vw)
היא יחידת מידה אשר מייצגת את רוחב החלון המוצג, כלומר, הגדרה של 100vw תגרום לאלמנט לקבל את מלוא רוחב החלון.
כנ"ל לגבי (vh (viewport height, רק בהקשר של גובה.
אז למה לא אחוזים?
אם שאלתם את השאלה הזו קודם לכן, שאלה טובה! אז מדוע נשתמש ב-vw/vh ולא באחוזים?
אחוזים זה מצוין אבל שימוש בהם נעשה לפי הצורך וחשוב להבין את ההבדל, בעת קביעת מידותיו של אלמנט באחוזים, גודלו מושפע מגודל אלמנט האב שלו, ולא כמו ב-vw/vh, שגודלו מושפע מגודל החלון כולו ללא קשר לגודל אלמנט האב שלו.
ISL Design