פונטים בעברית לאתר: RTL, טעינה וממשק קריא

פונט ו־RTL פותרים בעיות שונות

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

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

טוענים את הקובץ ומגדירים את המשקל שלו

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

הדוגמה שלמטה מציגה הגדרה סטטית. שמות הקבצים הם נתיבים לדוגמה: החליפו אותם בקבצים המורשים שאתם מארחים. אלה אינם קישורי הורדה. פונט חלופי שומר על זמינות הטקסט בזמן הטעינה, אבל הבדלים במידות יכולים לשנות שבירת שורות. בודקים את המעבר ולא מניחים שערך אחד של font-display פותר כל תזוזה בפריסה.

/* Example paths: replace with your licensed webfont files. */
@font-face {
  font-family: "Project Efrat";
  src: url("/fonts/efrat-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Project Efrat";
  src: url("/fonts/efrat-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
.event-card {
  font-family: "Project Efrat", Arial, sans-serif;
  line-height: 1.6;
  padding-inline: 1.25rem;
  text-align: start;
}

איך לבחור פונט בעברית שמתאים לפרויקט שלכם ↖

לצירים מעוצבים במדריך הפונטים המשתנים

בונים ממשק דו־לשוני קטן

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

דוגמת הקוד שומרת את כתובת האימייל בתוך אזור מבודד שכיוונו משמאל לימין. בטקסט לא ידוע שמגיע ממשתמשים, שקלו זיהוי כיוון כמו dir="auto" ובדקו מחרוזות מייצגות. כללי הכיווניות צריכים להתאים לתוכן; יישור קבוע לשמאל אינו תחליף.

<article class="event-card" lang="he" dir="rtl">
  <h2>ערב של עיצוב</h2>
  <p>יום חמישי · <bdi dir="ltr">19:30</bdi></p>
  <p>לפרטים: <bdi dir="ltr">hello@example.com</bdi></p>
</article>

שילוב פונטים בעברית ובאנגלית: מדריך מעשי ↖

פונטים קליגרפיים בעברית: בחירה ועיצוב של כותרות ↖

מאבחנים לפני שמחליפים פונט

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

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

בודקים את העמוד שנמסר

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

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

קריאות בעברית: גודל פונט, משקל וריווח ↖