הנושאים החמים
אז ממש לאחרונה גוגל הוסיפו בהרבה מאוד פונטים תמיכה בפונטים פרמטרים (ותודה ל- @חגית קרמר על העדכון),
אז במאמר הזה נסביר מה היתרונות של פונטים פרמטרים על פני פונטים רגילים, ואיך למעשה אפשר להשתמש בהם עם אלמנטור.
1. ההבדל בין פונט פרמטרי לפונט רגיל
אז הדוגמה הטובה ביותר, הוא במשקלי הפונטים, עד היום לכל פונט יש מספר של 3-4-5 משקלים (יש פונטים עם יותר ויש פחות), וזה בקפיצות של מאות, למשל, 300 400 וכו'.
לעומת זאת בפונטים פרמטרים, במקום לבחור לדוג' במשקל 400 או 500, אפשר לבחור כל מספר בין 300 ל-800, למשל אם החלטתם שהמשקל המדויק שמתאים לכם הוא 527, אז כן, אפשר לבחור את המשקל הזה.
חשוב להבין שלא לכל פונט פרמטרי יש את אותם הגדרות, כלומר בפונט אחד יהיה ניתן לבחור בין 400 ל-600, ובפונט אחר בין 100 ל- 900, אבל בכולם יש בעצם טווח בחירה ולא אפשרויות בודדות.
למרות שמשקל הפונט הוא כנראה ההגדרה הרלוונטית ביותר, יש עוד הגדרות שאפשר לשנות.
אחד המשמעותיים ביותר הוא רוחב הפונט.
אז אם יש לכם היכרות עם עולם הפונטים, חברות פונטים, בדר"כ בפונטים מאוד פופולריים, יוצרים גם גרסה צרה לפונט,
אז בפונטים פרמטרים גם את זה ניתן לקבוע, וכאמור אפשר יהיה לבחור בטווח של רוחב הפונט.
(גם כאן לא בכל פונט פרמטרי יש אפשרות לשלוט על זה).
אז בואו נראה כמה דוגמאות:
אז הנה הפונט opan sans ברוחב 100 (רגיל) ובמשקל 574.
והנה זה במשקל 699 וברוחב 77.
תכלס אתם מוזמנים לשחק עם זה בגוגל פונטס
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
2. איך מטמיעים את זה באלמנטור
אז למרות שבאלמנטור כבר יש את הפונטים של גוגל, בשביל להשתמש בהגדרות של הפונט הפרמטרי, נצטרך להעלות את הפונט כפונט מותאם.
קודם כל נוריד את חבילת הפונטים מגוגל
צריך לחלץ את הקבצים מהקובץ זיפ.
לאחר מכן בלוח הבקרה- אלמנטור - פונטים מותאמים,
ניצור פונט חדש נבחר בקובץ ttf
ונעלה את הקובץ ttf שבשמו מופיע variablefont.
לאחר מכן בעריכת עמודים באלמנטור נבחר את הפונט המותאם.
בשביל לשנות את המשקל והרוחב של הפונט, נצטרך להוסיף קצת css
כה נראה הקוד:
CSS:
selecter{
font-variation-settings: 'wght' 300, 'wdth' 100;}וזהו זה
