The CSS Podcast – 036: טקסט וטיפוגרפיה
טקסט הוא אחד מאבני הבניין המרכזיות של האינטרנט.
כשאתם יוצרים אתר, אתם לא חייבים לעצב את הטקסט. למעשה, ל-HTML יש כמה סגנונות ברירת מחדל סבירים למדי.
עם זאת, סביר להניח שהטקסט יהווה את רוב האתר, לכן כדאי להוסיף לו עיצוב כדי לשפר אותו. שינוי של כמה מאפיינים בסיסיים יאפשר לך לשפר משמעותית את חוויית הקריאה של המשתמשים.
במודול הזה נתחיל עם הכלל @font-face
, שמאפשר לייבא גופנים מותאמים אישית לדפי האינטרנט. כך תוכלו להבטיח שתהיה לכם את הטיפוגרפיה שאתם צריכים, בלי קשר לגופנים שהותקנו על ידי המשתמשים.
לאחר מכן נסקור מאפייני גופן חיוניים ב-CSS, כולל font-family
, font-style
, font-weight
ו-font-size
. העקרונות הבסיסיים האלה מאפשרים לבצע פעולות שונות בטקסט, גם מבחינת הסגנון וגם מבחינת הקריאוּת שלו.
נתייחס גם למאפיינים ספציפיים לפסקה, כמו text-indent
ו-word-spacing
, ובסוף נדבר על נושאים מתקדמים כמו גופנים משתנים ופסאודו-רכיבים, שיעזרו לכם לשפר את השליטה ברכיבי הטיפוגרפיה.
לאורך המדריך נספק דוגמאות והנחיות מעשיות כדי לעזור לכם להבין את שיטות ה-CSS האלה ולהשתמש בהן.
הכלל @font-face
הכלל @font-face
של CSS הוא חיוני בעיצוב אתרים, ומאפשר לציין ולהשתמש בגופנים מותאמים אישית להצגת טקסט. היתרון של @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
מקבל רשימת מחרוזות שמופרדות בפסיקים, שמתייחסות למשפחות של גופנים ספציפיות או גנריות. משפחות גופנים ספציפיות מוקפות במירכאות, כמו "Hקיצור", "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
.
הנכס text-decoration-style
מקבל את מילות המפתח solid
, double
, dotted
, dashed
ו-wavy
.
הנכס 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
במודול שלנו בנושא צללים.
גופנים משתנים
בדרך כלל, כדי לייבא גופנים 'רגילים' צריך לייבא קבצים שונים לגרסאות שונות של הגופן, כמו מודגש, נטוי או דחוס. גופנים משתנים הם גופנים שיכולים להכיל וריאנטים רבים ושונים של גופן מסוים בקובץ אחד.
לפרטים נוספים, ניתן לעיין במאמר שלנו על Variables Fonts.
רכיבי פסאודו
רכיבי ::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
sci-fi
monospace
serif
helvetica
sans-serif
איזו הצהרה משמשת להמרת האות הראשונה של כל מילה לאותיות רישיות? למשל: This is a sentence.
⬅ This Is A Sentence.
text-case: capitalize;
font-variant: capitalize;
text-capitalize: true;
font-style: capitals;
text-transform: capitalize;
נכון או לא נכון: משתמשים ב-text-orientation
כדי ליישר טקסט שמאלה, ימינה או למרכז.
באיזה מאפיין CSS אפשר להשתמש כדי לשנות את המרווח בין שורות הטקסט?
line-height
line-spacing
leading
baseline-distance
משאבים
- שיטות מומלצות בנושא גופנים עוסקות בייבוא גופנים, ברינדור גופנים ובשיטות מומלצות אחרות לשימוש בגופנים באינטרנט.
- סגנון טקסט וגופן בסיסי ב-MDN