Hebrew Fonts

איך לשלוט "קצת" בגופנים?

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

שנתחיל?

וזה המקור

רוצים להעתיק את הקודים בקלות? לחצו כאן למסמך השיתופי

קרן אייז

חזרה להתחלה

כתיבת Right To Left

(RTL)

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

1. יש לסמן את הטקסט בתוך תיבת הטקסט.
2. לאחר שסימנו את הטקסט, יש ללחוץ על Ctrl+Shift ימניים במקלדת.

להמשך

חזרה להתחלה

אז הגיע הלילה של כוכב השביט הראשון

Heebo

Google Fonts

אז הגיע הלילה של כוכב השביט הראשון

Rubik

אז הגיע הלילה של כוכב השביט הראשון

Open Sans

אז הגיע הלילה של כוכב השביט הראשון

Assistant

אז הגיע הלילה של כוכב השביט הראשון

Secular One

* דיסקליימר: הדירוג הוא לפי הטעם האישי שלי.

אז הגיע הלילה של כוכב השביט הראשון

Varela Round

אז הגיע הלילה של כוכב השביט הראשון

https://fonts.google.com/?subset=hebrew

Arimo

אז הגיע הלילה של כוכב השביט הראשון

Tinos

אז הגיע הלילה של כוכב השביט הראשון

M PLUS 1p

אז הגיע הלילה של כוכב השביט הראשון

Amatic SC

אז הגיע הלילה של כוכב השביט הראשון

M PLUS Rounded 1c

אז הגיע הלילה של כוכב השביט הראשון

Suez One

אז הגיע הלילה של כוכב השביט הראשון

Alef

אז הגיע הלילה של כוכב השביט הראשון

Cousine

Frank Ruhl Libre

אז הגיע הלילה של כוכב השביט הראשון

אז הגיע הלילה של כוכב השביט הראשון

Bellefair

אז הגיע הלילה של כוכב השביט הראשון

David Libre

אז הגיע הלילה של כוכב השביט הראשון

Miriam Libre

-----

Noto Serif Hebrew

-----

Noto Rashi Hebrew

-----

Bona Nova

-----

Karantina

-----

IBM Plex Sans Hebrew

----

Noto Sans Hebrew

להמשך

-----

Rubik Beastly

-----

Fredoka

חזרה להתחלה

גופנים על אלמנטים: מעבר עכבר על אלמנט

עברו עם העכבר על האייקון

אבל השיטה הזאת לא עובדת באלמנטים אחרים. אז איך אפשר בכל זאת לעצב את האלמנטים כמו זה שמופיע במעבר עכבר על קישור? לשם כך נצטרך להשתמש בקוד CSS שנדביק במקום המסומן (Name the element):

להמשך

חזרה להתחלה

גופנים של Tooltip

או ב-Tooltip? גם פה נצטרך להשתמש בקוד CSS שנדביק באזור הכתיבה. שימו לב שעלינו לעבור למצב צפייה של קוד.

עברו עם העכבר על האייקון

להמשך

חזרה להתחלה

קוד לעיצוב גופנים

מקור להשוואה

<div dir=rtl> רק שינוי כתיבה מ-LTR ל-RTL. </div>

הקוד הנדרש:

שינוי כתיבה מ-LTR ל-RTL

<div dir=rtl><p style="font-family: 'rubik';"> שינוי כתיבה מ-LTR ל-RTL + שינוי הגופן ל- Rubik </div>

הקוד הנדרש:

שינוי כתיבה מ-LTR ל-RTL+ שינוי הגופן ל- Rubik

<div dir=rtl><p style="font-family: 'Assistant';"> שינוי כתיבה מ-LTR ל-RTL + שינוי הגופן ל- Assistant </div>

שינוי כתיבה מ-LTR ל-RTL+ שינוי הגופן ל- Assistant

הקוד הנדרש:

להמשך

רוצים להעתיק את הקודים בקלות? לחצו כאן למסמך השיתופי

חזרה להתחלה

קוד לעיצוב גופנים

מקור להשוואה

(שימו לב, כל הוספה של רכיב עיצוב הטקסט נכנס לתוך תגית ה-P ומופרדת בסימן "הנקודה-פסיק")

<div dir=rtl><p style="font-family: 'rubik'; font-size:24px;"> שינוי כתיבה מ-LTR ל-RTL + שינוי הגופן ל- Rubik + גודל גופן 24 פיקסלים </div>

שינוי כתיבה מ-LTR ל-RTL + שינוי הגופן ל- Rubik + גודל גופן 24 פיקסלים

הקוד הנדרש:

<div dir=rtl><p style="font-family: 'rubik'; font-size:18px; color:#F74395;"> שינוי כתיבה מ-LTR ל-RTL + שינוי הגופן ל- Rubik + גודל גופן 18 פיקסלים + צבע טקסט ורוד </div>

שינוי כתיבה מ-LTR ל-RTL + שינוי הגופן ל- Rubik + גודל גופן 18 פיקסלים + צבע טקסט ורוד

הקוד הנדרש:

להמשך

רוצים להעתיק את הקודים בקלות? לחצו כאן למסמך השיתופי

חזרה להתחלה

קוד לעיצוב גופנים

מקור להשוואה

שבירת שורה נעשית באמצעות תגית

<br>

<div dir=rtl><p style="font-family: 'rubik';"> שינוי כתיבה מ-LTR ל-RTL<br> + שינוי הגופן ל- Rubik<br> + שבירת שורות </div>

שינוי כתיבה מ-LTR ל-RTL + שינוי הגופן ל- Rubik + שבירת שורות

הקוד הנדרש:

<b>טקסט מודגש</b>

הדגשת טקסט (BOLD) נעשית באמצעות תגית

<div dir=rtl><p style="font-family: 'rubik';"> שינוי כתיבה מ-LTR ל-RTL<br> <b>+ טקסט מודגש</b><br> + שינוי הגופן ל- Rubik<br> + שבירת שורות<br> </div>

שינוי כתיבה מ-LTR ל-RTL + טקסט מודגש + שינוי הגופן ל- Rubik + שבירת שורות

הקוד הנדרש:

להמשך

רוצים להעתיק את הקודים בקלות? לחצו כאן למסמך השיתופי

חזרה להתחלה

בהצלחה!

קרן אייז

מצאתם.ן טעות? או רוצות.ים להוסיף קוד? מוזמנים.ות לפנות אלי