מאמר זה מספק את ההליך לשליטה במשפחת הגופנים של אלמנט באמצעות כלי השירות Tailwind.
כיצד לשלוט במשפחת הגופנים של אלמנט באמצעות כלי השירות Tailwind?
על מנת לשלוט במשפחת גופנים של אלמנט ב-Tailwind, יש לספק לאלמנט את כלי השירות הבא:
גוֹפָן- { משפחת גופן }
ישנן שלוש משפחות גופנים המוגדרות כברירת מחדל שניתן להגדיר באמצעות כלי השירות שסופק לעיל. אלו כוללים ' תָג ',' לְלֹא ', ו' מונו '.
בואו נשתמש במשפחות הגופנים האלה בהדגמה באמצעות ' font-{font family} ' בכיתה כדי לראות איך זה עובד:
< div מעמד = ' font-serif rounded-xl shadow-lg text-center py-2 my-2 bg-green-100 ' >
זוהי משפחת FONT-SERIF
< / div >
< div מעמד = 'font-sans rounded-xl shadow-lg text-center py-2 my-2 bg-blue-100' >
זוהי משפחת FONT-SANS
< / div >
< div מעמד = 'font-mono rounded-xl shadow-lg text-center py-2 my-2 bg-red-100' >
מדובר במשפחת FONT-MONO
< / div >
ההסבר לקוד לעיל הוא כדלקמן:
- ישנם שלושה רכיבי div שנוצרו באמצעות ' ” ומסופקים עם משפחות גופנים שונות.
- ה ' משפחת גופן} ” class תספק את משפחת הגופנים שצוינה לטקסט באלמנט.
- ה ' מעוגל-xl ” class יהפוך את הפינות של אלמנט ה-div לעגול.
- ה ' צל-לג הכיתה תספק צל גדול לאלמנט ה-div.
- ה ' מרכז טקסט ” יישר את הטקסט למרכז האלמנט.
- ה ' py-2 'ו' שלי-2 'שיעורים יספקו' 8 פיקסלים ' ריפוד ושוליים בכיוון העליון והתחתון של האלמנט.
- ה ' bg-{color}-{number} ” class אחראי על הגדרת הרקע של האלמנט לצבע שצוין.
מהפלט, ברור שלכל אלמנט יש משפחת גופנים שונה:
אנו יכולים גם לשנות באופן דינמי את משפחת הגופנים של אלמנט באמצעות פונקציית הרחף. להמחשה, עבור על הקוד הבא:
< div מעמד = 'my-2 rounded-xl bg-slate-100 py-2 text-center font-mono shadow-lg hover:font-serif' >זוהי משפחת FONT-MONO כברירת מחדל< / div >בקוד שסופק לעיל, ' לרחף: גופן-{משפחה} ' השירות אחראי לשינוי משפחת הגופנים של האלמנט ברגע שסמן העכבר מרחף מעליו. ניתן לראות בפלט שמשפחת הגופנים של הטקסט משתנה כאשר המשתמש מרחף מעליו את סמן העכבר:
זה הכל על שליטה במשפחת הגופנים של אלמנט ב-Tailwind.
סיכום
ב-Tailwind, ניתן להקצות לרכיב משפחת גופנים באמצעות ' משפחת גופן} ' מעמד. ישנן שלוש משפחות גופנים המוגדרות כברירת מחדל המסופקות על ידי Tailwind, כלומר ' לְלֹא ',' תָג ', ו' מונו '. המשתמש יכול גם לשנות את משפחת הגופנים של אלמנט עם שינוי מצבו של אלמנט. מאמר זה סיפק את ההליך לשליטה במשפחת הגופנים של אלמנט ב-Tailwind.