The CSS Podcast – 036: טקסט וטיפוגרפיה
טקסט הוא אחד מאבני הבניין המרכזיות של האינטרנט.
כשאתם יוצרים אתר, אתם לא חייבים לעצב את הטקסט. למעשה, ל-HTML יש כמה סגנונות ברירת מחדל סבירים למדי.
עם זאת, סביר להניח שהטקסט יהווה את רוב האתר, לכן כדאי להוסיף לו עיצוב כדי לשפר אותו. שינוי של כמה מאפיינים בסיסיים יכול לשפר משמעותית את חוויית הקריאה של המשתמשים.
במודול הזה נתחיל עם הכלל @font-face
, שמאפשר לייבא גופנים מותאמים אישית לדפי האינטרנט. כך תוכלו להשתמש בגופנים בדיוק כמו שאתם רוצים, ללא קשר לגופנים שהמשתמשים התקינו.
לאחר מכן נסקור מאפייני גופנים חיוניים ב-CSS, כולל font-family
, font-style
, font-weight
ו-font-size
. העקרונות הבסיסיים האלה מאפשרים לבצע פעולות שונות בטקסט, גם מבחינת הסגנון וגם מבחינת הקריאוּת שלו.
נתייחס גם למאפיינים ספציפיים לפסקה, כמו text-indent
ו-word-spacing
, ובסוף נדבר על נושאים מתקדמים כמו גופנים משתנים ופסאודו-רכיבים, שיעזרו לכם לשפר את השליטה ברכיבי הטיפוגרפיה.
לאורך המדריך נספק דוגמאות והנחיות מעשיות כדי לעזור לכם להבין את שיטות ה-CSS האלה ולהשתמש בהן.
הכלל @font-face
כלל ה-at-rule של CSS @font-face
הוא כלי חשוב בתכנון אתרים, שמאפשר לציין פונטים בהתאמה אישית ולהשתמש בהם כדי להציג טקסט. היתרון של @font-face
הוא בגמישות שלו: הוא מאפשר לכם לקבל גופנים משרת מרוחק או מגופן שמותקן במכשיר של המשתמש.
תחביר
@font-face {
font-family: "Trickster";
src:
local("Trickster"),
url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
url("trickster-outline.otf") format("opentype"),
url("trickster-outline.woff") format("woff")
}
מתארים
ascent-override
- התאמה אישית של מדד העלייה, שמשפיעה על המרחב שמעל לקו הבסיס.
descent-override
- התאמת המדד 'ירידה', שמשפיעה על המרחב מתחת לקו הבסיס.
font-display
- קובעת את התנהגות התצוגה של הגופן בהתאם לסטטוס ההורדה שלו.
font-family
- שם הגופן לשימוש בנכסים שקשורים לגופן.
font-stretch
- הגדרת התאמה אופקית מקובלת, שצוינה כערך יחיד או כטווח.
font-style
- מגדיר את סגנון הגופן, ותומך בטווח זוויות לסגנונות מוטים.
font-weight
- קובע את משקל הגופן או את טווח המשקלים הזמינים.
font-feature-settings
- הרשאה שמאפשרת גישה לתכונות של גופנים מסוג OpenType.
font-variation-settings
- מספקת שליטה מדויקת בהגדרות של גופנים משתנים.
line-gap-override
- מבטלת את מרווח השורה שמוגדר כברירת מחדל בגופן.
size-adjust
- החלת גורם לקביעת קנה מידה על קווי המתאר והמדדים של הגופן.
src
- מגדיר את מקור הגופן, בין אם הוא מקומי ובין אם הוא מרוחק. הדבר נדרש לכלל
@font-face
. שילוב שלurl()
ו-local()
ב-src
הוא אסטרטגיה נפוצה שמשתמשת בגופן מקומי אם הוא זמין, ומשתמשת בקובץ גופן מרוחק כחלופה. הדפדפנים נותנים עדיפות למשאבים על סמך סדר ההצהרה, ולכן בדרך כללlocal()
צריך להופיע לפניurl()
. unicode-range
- מגבילה את התווים שבהם צריך להשתמש בגופן הזה.
תיאור
@font-face
משחרר את המעצבים מהאילוצים של גופנים 'בטוחים לאינטרנט', ומאפשר להם להשתמש בטיפוגרפיה בהתאמה אישית. היכולת של הפונקציה local()
לחפש גופן במכשיר של המשתמש מספקת חוויה חלקה שלא תלויה בהכרח בחיבור לאינטרנט.
סוגי MIME של גופנים
אופן הלימוד | סוג MIME |
---|---|
TrueType | font/ttf |
OpenType | font/otf |
Web Open Font Format | font/woff |
Web Open Font Format 2 | font/woff2 |
ההבדל בין @font-face לבין font-family
ב-CSS, לעיתים קרובות מבלבלים בין @font-face
לבין font-family
, אבל לכל אחת מהן יש מטרה שונה.
כפי שציינו, @font-face
הוא כלל שמגדיר את הגופנים בהתאמה אישית שבהם רוצים להשתמש באפליקציית האינטרנט. הוא מציין לדפדפן לאן להוריד את הגופן, איך להציג אותו במהלך הטעינה (באמצעות המאפיין font-display
) ואילו קבוצות משנה של תווים להוריד (באמצעות המאפיין unicode-range
).
לעומת זאת, font-family
הוא מאפיין CSS שמשמש בכלל CSS כדי להקצות רכיב לגופן מסוים או לרשימת גופנים. הגופנים שמפורטים בקטע font-family
יכולים להיות גופנים בטוחים לאינטרנט, גופנים של מערכת או גופנים מותאמים אישית שהוגדרו באמצעות @font-face
.
לסיכום, הפונקציה @font-face
מגדירה גופן ומקצה לו שם, והפונקציה font-family
מחילה את הגופן המוצהר הזה על רכיבי HTML.
דוגמה לשימוש בשניהם:
<table>
<thead>
<tr>
<th><p><pre>
@font-face {
font-family: "CustomFont";
src: url("customfont.woff2") format("woff2");
}
body {
font-family: "CustomFont", Arial, sans-serif;
}
בדוגמה הזו, @font-face
מגדיר את 'CustomFont' ומציין לדפדפן איפה הוא נמצא. לאחר מכן, הנכס font-family
מחיל אותו על רכיב הגוף, עם Arial כחלופה אם האפשרות CustomFont לא זמינה.
שינוי סוג הגופן
משתמשים ב-font-family
כדי לשנות את סוג הגופן של הטקסט.
המאפיין font-family
מקבל רשימה של מחרוזות המופרדות בפסיקים, שמפנה לקבוצות גופנים ספציפיות או כלליות. משפחות גופנים ספציפיות הן מחרוזות במירכאות, כמו 'Helvetica', 'EB Garamond' או 'Times New Roman'. משפחות גופנים כלליות הן מילות מפתח כמו serif
, sans-serif
ו-monospace
(הרשימה המלאה של האפשרויות זמינה ב-MDN). הדפדפן יציג את הגופן הראשון שזמין מהרשימה שצוינה.
כשמשתמשים ב-font-family
, צריך לציין לפחות משפחת גופנים גנרית אחת למקרה שהגופנים המועדפים לא יהיו זמינים בדפדפן של המשתמש. באופן כללי, משפחת הגופנים הגנרית החלופית צריכה להיות דומה לגופנים המועדפים עליכם: אם אתם משתמשים ב-font-family: "Helvetica"
(משפחת גופנים ללא serif), הגופן החלופי צריך להיות sans-serif
כדי להתאים.
שימוש בגופנים נטויים
משתמשים ב-font-style
כדי לקבוע אם הטקסט יהיה נטוי או לא. בשדה font-style
אפשר להזין אחת ממילות המפתח הבאות: normal
, italic
ו-oblique
.
הדגשת טקסט
משתמשים ב-font-weight
כדי להגדיר את העוצמה של הטקסט. המאפיין הזה מקבל ערכים של מילות מפתח (normal
, bold
), ערכים יחסיים של מילות מפתח (lighter
, bolder
) וערכים מספריים (100
עד 900
).
מילות המפתח normal
ו-bold
זהות לערכים המספריים 400
ו-700
, בהתאמה.
מילות המפתח lighter
ו-bolder
מחושבות ביחס לרכיב ההורה. במאמר המשמעות של משקלים יחסיים ב-MDN מופיע תרשים שימושי שמראה איך הערך הזה נקבע.
שינוי גודל הטקסט
משתמשים ב-font-size
כדי לקבוע את הגודל של רכיבי הטקסט. אפשר להזין במאפיין הזה ערכים של אורך, אחוזים וכמה ערכים של מילות מפתח.
בנוסף לערכים של אורך ושל אחוזים, font-size
מקבל כמה ערכים מוחלטים של מילות מפתח (xx-small
, x-small
, small
, medium
, large
, x-large
, xx-large
) וכמה ערכים יחסיים של מילות מפתח (smaller
, larger
). הערכים היחסיים הם יחסיים ל-font-size
של רכיב ההורה.
שינוי הריווח בין השורות
משתמשים ב-line-height
כדי לציין את הגובה של כל שורה ברכיב. אפשר להזין בנכס הזה מספר, אורך, אחוז או את מילת המפתח normal
. באופן כללי, מומלץ להשתמש במספר במקום באורך או באחוז כדי למנוע בעיות בירושה.
שינוי הריווח בין התווים
אפשר להשתמש ב-letter-spacing
כדי לקבוע את גודל המרווחים האופקיים בין התווים בטקסט. המאפיין הזה מקבל ערכים של אורך, כמו em
, px
ו-rem
.
הערך שצוין מגדיל את כמות הרווחים הטבעיים בין התווים. בדמו הבא, נסו לבחור אות בודדת כדי לראות את גודל פורמט letterbox שלה ואת השינוי בפורמט עם letter-spacing
.
שינוי הריווח בין מילים
משתמשים ב-word-spacing
כדי להגדיל או להקטין את אורך הרווחים בין המילים בטקסט. המאפיין הזה מקבל ערכים של אורך, כמו em
, px
ו-rem
. חשוב לזכור שהאורך שציינתם הוא למרחב נוסף בנוסף למרווח הרגיל. כלומר, word-spacing: 0
שווה ערך ל-word-spacing: normal
.
font
קיצור דרך
אפשר להשתמש בקיצור הדרך של המאפיין font
כדי להגדיר כמה מאפיינים שקשורים לגופן בבת אחת. רשימת המאפיינים האפשריים היא font-family
, font-size
, font-stretch
, font-style
, font-variant
, font-weight
ו-line-height
.
במאמר font
ב-MDN מוסבר בפירוט איך מגדירים את הסדר של המאפיינים האלה.
שינוי אות רישית של טקסט
משתמשים ב-text-transform
כדי לשנות את האותיות הרישיות בטקסט בלי לשנות את ה-HTML הבסיסי. המאפיין הזה מקבל את ערכי מילות המפתח הבאים: uppercase
, lowercase
ו-capitalize
.
הוספת קו תחתון, קו עליון וקווים חוצים לטקסט
משתמשים ב-text-decoration
כדי להוסיף שורות לטקסט. קווים תחתונים הם השימוש הנפוץ ביותר, אבל אפשר להוסיף קווים מעל הטקסט או ממש בתוכו.
המאפיין text-decoration
הוא קיצור דרך למאפיינים הספציפיים יותר שמפורטים בהמשך.
המאפיין text-decoration-line
מקבל את מילות המפתח underline
, overline
ו-line-through
. אפשר גם לציין כמה מילות מפתח לכמה שורות.
המאפיין text-decoration-color
קובע את הצבע של כל הקישוטים מ-text-decoration-line
.
אפשר להשתמש במילות המפתח solid
, double
, dotted
, dashed
ו-wavy
במאפיין text-decoration-style
.
הנכס text-decoration-thickness
מקבל כל ערכי האורך ומגדיר את רוחב הקו של כל הקישוטים מ-text-decoration-line
.
המאפיין text-decoration
הוא קיצור דרך לכל המאפיינים שלמעלה.
הוספת הכנסה לטקסט
משתמשים ב-text-indent
כדי להוסיף הכנסה לקטעי הטקסט. המאפיין הזה יכול לקבל אורך (לדוגמה, 10px
, 2em
) או אחוז מהרוחב של הבלוק המכיל.
טיפול בתוכן שחורג מהמסגרת או בתוכן מוסתר
משתמשים ב-text-overflow
כדי לציין איך התוכן המוסתר יוצג. יש שתי אפשרויות: clip
(ברירת המחדל), שבה הטקסט יקוצר בנקודת החריגה מהרוחב, ו-ellipsis
, שבה יוצג קו נטוי (…) בנקודת החריגה מהרוחב.
שליטה במרווחים
המאפיין white-space
משמש לציון אופן הטיפול במרווחים לבנים ברכיב. פרטים נוספים זמינים במאמר white-space
ב-MDN.
אפשר להשתמש ב-white-space: pre
כדי להציג אמנות ASCII או בלוקים של קוד עם הפסקות מרווחים.
שליטה באופן שבו מילים מחולקות
אפשר להשתמש ב-word-break
כדי לשנות את אופן 'הפסקת' המילים כשהן חורגות מהשורה. כברירת מחדל, הדפדפן לא יחלק מילים. שימוש בערך של מילת המפתח break-all
עבור word-break
יורה לדפדפן לפצל מילים לפי תווים נפרדים, אם יש צורך.
שינוי יישור הטקסט
משתמשים ב-text-align
כדי לציין את היישור האופק של הטקסט ברכיב של בלוק או תא בטבלה. המאפיין הזה מקבל את ערכי מילות המפתח left
, right
, start
, end
, center
, justify
ו-match-parent
.
הערכים left
ו-right
מיישרים את הטקסט לצד השמאלי ולצד הימני של הבלוק, בהתאמה.
משתמשים ב-start
וב-end
כדי לייצג את המיקום של ההתחלה והסיום של שורת טקסט במצב הכתיבה הנוכחי. לכן, הערך start
ממופה לערך left
באנגלית, ולערך right
בסקריפט הערבי שנכתב מימין לשמאל (RTL). אלה התאמות לוגיות. מידע נוסף זמין במודול מאפיינים לוגיים.
משתמשים ב-center
כדי ליישר את הטקסט למרכז הבלוק.
הערך של justify
מארגן את הטקסט ומשנה את המרווחים בין המילים באופן אוטומטי, כך שהטקסט יישר עם הקצוות הימניים והשמאליים של הבלוק.
שינוי הכיוון של הטקסט
משתמשים ב-direction
כדי להגדיר את כיוון הטקסט: ltr
(משמאל לימין, ברירת המחדל) או rtl
(ימינה לשמאל). שפות מסוימות, כמו ערבית, עברית או פרסית, נכתבות מימין לשמאל, לכן צריך להשתמש ב-direction: rtl
. בשפה האנגלית ובכל שפות אחרות שנכתבות משמאל לימין, משתמשים ב-direction: ltr
.
שינוי זרימת הטקסט
משתמשים ב-writing-mode
כדי לשנות את אופן הזרימה והסידור של הטקסט. ברירת המחדל היא horizontal-tb
, אבל אפשר גם להגדיר את writing-mode
כ-vertical-lr
או כ-vertical-rl
לטקסט שרוצים שיופיע במאוזן.
שינוי הכיוון של הטקסט
משתמשים ב-text-orientation
כדי לציין את הכיוון של התווים בטקסט. הערכים החוקיים למאפיין הזה הם mixed
ו-upright
. המאפיין הזה רלוונטי רק כשהערך של writing-mode
מוגדר לערך שאינו horizontal-tb
.
הוספת צללית לטקסט
משתמשים ב-text-shadow
כדי להוסיף צל לטקסט. המאפיין הזה מצפה לשלושה אורכי פס (x-offset
, y-offset
ו-blur-radius
) ולצבע.
מידע נוסף זמין בקטע text-shadow
במודול שלנו בנושא צללים.
גופנים משתנים
בדרך כלל, כדי לייבא גופנים 'רגילים' צריך לייבא קבצים שונים לגרסאות שונות של הגופן, כמו מודגש, נטוי או דחוס. גופנים משתנים הם גופנים שיכולים להכיל וריאציות רבות ושונות של גופן מסוים בקובץ אחד.
פרטים נוספים זמינים במאמר שלנו בנושא גופנים משתנים.
רכיבי פסאודו
רכיבי ::first-letter
ו-::first-line
פסאודו-רכיבים
רכיבי הפסאודו ::first-letter
ו-::first-line
מטרגטים את האות הראשונה והשורה הראשונה של רכיב טקסט, בהתאמה.
רכיב ::selection
לכאורה
משתמשים בפסאודו-רכיב ::selection
כדי לשנות את המראה של טקסט שנבחר על ידי המשתמש.
כשמשתמשים בפסאודו-רכיב הזה, אפשר להשתמש רק במאפייני CSS מסוימים: color
, background-color
, text-decoration
, text-shadow
, stroke-color
, fill-color
, stroke-width
.
font-variant
המאפיין font-variant
הוא קיצור דרך למספר מאפייני CSS שמאפשרים לכם לבחור וריאנטים של גופנים כמו small-caps
ו-slashed-zero
. מאפייני ה-CSS שכלולים בקיצור הדרך הזה הם font-variant-alternates
, font-variant-caps
, font-variant-east-asian
, font-variant-ligatures
ו-font-variant-numeric
. בקישורים שבכל נכס תוכלו למצוא פרטים נוספים על השימוש בו.
בדיקת ההבנה
בדיקת הידע שלכם בנושא טיפוגרפיה באינטרנט
אילו מילות מפתח מהאפשרויות הבאות אפשר להשתמש בהן כחלופה גנרית ל-font-family
?
italic
sans-serif
serif
monospace
helvetica
sci-fi
איזו הצהרה משמשת להמרת האות הראשונה בכל מילה לאות רישית? לדוגמה: This is a sentence.
➡ This Is A Sentence.
font-style: capitals;
text-capitalize: true;
text-transform: capitalize;
text-case: capitalize;
font-variant: capitalize;
נכון או לא נכון: משתמשים ב-text-orientation
כדי ליישר טקסט שמאלה, ימינה או למרכז.
באיזה מאפיין CSS אפשר להשתמש כדי לשנות את המרווח בין שורות הטקסט?
baseline-distance
leading
line-spacing
line-height
משאבים
- במאמר שיטות מומלצות לשימוש בגופנים מוסבר על ייבוא גופנים, על עיבוד גופנים ועל שיטות מומלצות נוספות לשימוש בגופנים באינטרנט.
- סגנון טקסט וגופן בסיסי ב-MDN