ב-Google Fonts יש עכשיו תמיכה מלאה בגופנים משתנים בעדכון API של v2. נסביר איך לקרוא למשפחת גופנים יחידה וגם לגופנים מרובים, ואיך לציין טווחי צירים. למבט מעמיק על גופנים משתנים, עלון מאויר באופן אינטראקטיבי מ-David Berlow ב-TypeNetwork.
מה חדש
הכול מתחיל בכתובת URL בסיסית חדשה:
https://fonts.googleapis.com/css2
התחביר לציון סגנונות בתוך כל משפחה השתנה כדי לתאר גופן משתנה 'מרחבי עיצוב'.
מדריכים למתחילים
מעתיקים את קוד ה-HTML ומדביקים אותו בקובץ:
<html> <head> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro"> <style> body { font-family: 'Crimson Pro', serif; font-size: 48px; } </style> </head> <body> <div>Making the Web Beautiful!</div> </body> </html>
באמצעות הדפדפן לפתיחת הקובץ, הדף צריך לעבד את הטקסט "גדולים באינטרנט" בגופן Crimson Pro.
משפחות מרובות
כדי לבקש משפחות רבות, יש לציין את הפרמטר family=
לכל משפחה.
לדוגמה, כדי לבקש את הגופנים Crimson Pro ו-Literata:
https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata
מעתיקים את קוד ה-HTML ומדביקים אותו בקובץ:
<html> <head> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata"> <style> body { font-size: 48px; } div:nth-child(1) { font-family: 'Crimson Pro', serif; } div:nth-child(2) { font-family: 'Literata’, serif; } </style> </head> <body> <div>Making the Web Beautiful!</div> <div>Making the Web Beautiful!</div> </body> </html>
באמצעות הדפדפן לפתיחת הקובץ, הדף צריך לעבד את הטקסט "הפיכת האינטרנט ליפה", תחילה ב-Crimson Pro ולאחר מכן ב-Literata.
טווחי הצירים
גופנים משתנים מציעים סגנונות רציפים, לרוב ללא זמן אחזור נוסף. האפשרות הזו רלוונטית לעיצוב רספונסיבי. הטיפוגרפיה הדינאמית הזו משתמשת במגוון סגנונות רציפים, תוך שקלול כל המשקל בין 100 ל-900 בדף ושינוי המשקל בהתאם לתנאים מסוימים.
כדי לבקש טווח של ציר גופן משתנה, מצרפים את 2 הערכים ל-..
גופנים | בקשה |
---|---|
Crimson Pro [wght 200-900 ] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200..900 |
Crimson Pro נטוי (wght 200-900 ) |
https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@1,200..900 |
Crimson Pro מודגש נטוי [wght 200-900 ] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,700 |
סגנונות ספציפיים, כמו משקל
ללא מפרטי סגנון, ממשק ה-API מספק את סגנון ברירת המחדל של המשפחה המבוקשת. כדי לבקש סגנונות נפרדים אחרים, כגון משקלים ספציפיים, מוסיפים סימן נקודתיים (:) אחרי שם של משפחת הגופנים, ולאחר מכן רשימה של מילות מפתח הקשורות לציר הזמן לפי סדר אלפביתי, תמרור (@) ורשימה אחת או יותר של ערכים עבור המאפיינים האלו.
הדוגמאות האלה מוצגות בפעולה.
גופנים | בקשה |
---|---|
Crimson Pro (ברירת מחדל) | https://fonts.googleapis.com/css2?family=Crimson+Pro |
קרימזון Pro מודגש | https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700 |
Crimson Pro רגיל ומודגש | https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;700 |
Crimson Pro מודגש ומודגש נטוי | https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,700;1,700 |
ב-Google Fonts מפורטים כל הסגנונות שזמינים לכל משפחת גופנים.
סגנון ברירת המחדל
כשבקשה לא מציינת מיקום או טווח של ציר, המערכת משתמשת במיקום ברירת המחדל. מיקום ברירת המחדל של הציר הנטוי הוא 0 (רגיל), וברירת המחדל של ציר המשקל היא 400 (רגילה).
עבור משפחות עם צירים שלא כולל את מיקום ברירת המחדל, בקשות שלא מציינות מיקומים לצירים האלו ייכשלו. לדוגמה, כשמבקשים משפחה עם ציר משקל בין 500 ל-900, צריך לציין את מיקום המשקל.
משקלים לא סטנדרטיים
בגופנים סטטיים, הסגנונות של משקל מציינים בדרך כלל ככפולים של 100 (למשל 300, 400, 700). גופנים משתנים מציעים גם את המשקלים הרגילים וגם את המשקלים הבינוניים. כדי לעבד משקל ביניים:
https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@450
אופטימיזציה לזמן אחזור ולגודל הקובץ
חשוב על הסגנונות המדויקים שאתם משתמשים בהם. ה-API מספק את הסגנונות המבוקשים בקבוצת הגופנים הקומפקטית ביותר. בקשת סגנונות שאינם בשימוש עלולה לגרום למשתמשים להוריד יותר נתוני גופן מהצורך, וכך זמן האחזור ארוך יותר. אם אתם משתמשים רק ב-3 משקלים ספציפיים, עליכם לציין אותם בבקשה שלכם כסגנונות נפרדים. אם אתם משתמשים בטווח משקל רציף, עליכם לציין את טווח המשקל בבקשה.
שימוש בגופן
הנכס font-display מאפשר לכם לשלוט במה שקורה כאשר הגופן עדיין בטעינה או לא זמין. ציון ערך שונה מברירת המחדל auto
הוא בדרך כלל מתאים.
מעבירים את הערך הרצוי בפרמטר display
:
https://fonts.googleapis.com/css2?family=Crimson+Pro&display=swap
אופטימיזציה של הבקשות לגופנים
לעיתים קרובות, כשרוצים להשתמש בגופן באינטרנט באתר או באפליקציה, אפשר לדעת מראש אילו אותיות צריך להזין. לרוב זה קורה כשאתם משתמשים בגופן אינטרנט בלוגו או בכותרת.
במקרים כאלה מומלץ לציין ערך של text=
בכתובת האתר של בקשת הגופן. כך מאפשרים ל-Google Fonts להחזיר קובץ גופן שעבר אופטימיזציה לבקשה שלכם. בחלק מהמקרים הפעולה הזו יכולה לצמצם את גודל קובץ הגופנים בשיעור של עד 90%.
כדי להשתמש בתכונה הזו צריך פשוט להוסיף את text=
לבקשת ה-API שלך. לדוגמה, אם אתם משתמשים רק ב-Inconsolata לכותרת של הבלוג, תוכלו להוסיף את הכותרת עצמה כערך של text=
. כך תיראה הבקשה:
https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello
כמו בכל מחרוזות שאילתה, יש לקודד את הערך באמצעות כתובת URL:
https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello%20World
התכונה הזו פועלת גם בגופנים בינלאומיים, וכך מאפשרת לציין תווי UTF-8. לדוגמה, הולה! מיוצג על ידי:
https://fonts.googleapis.com/css2?family=Comfortaa&text=%c2%a1Hola!
לתשומת לבך, ניתן לציין את הפרמטר 'text=' פעם אחת בלבד. הוא חל על כל המשפחות בבקשה. אם אתם זקוקים לאופטימיזציות שונות של טקסט בין כמה משפחות, השתמשו בבקשות API נפרדות.
יצירת כתובות URL של ממשק API
קפדנות
באופן כללי, ה-CSS API המעודכן מחמיר יותר לגבי בקשות שמתקבלים מאשר ממשק ה-API המקורי.
הנחיות כלליות:
- רשימה של הצירים לפי סדר אלפביתי (לוקאל
en-US
) - צריך למיין את הקבוצות של ערכי הציר (כלומר חלוקים) באופן מספרי
- חלוקי כסף לא יכולים להיות חופפים או לגעת בהם (לדוגמה,
wght
400..500 ו-500..600)
מפרט כתובת URL של API
/css2?family=<spec>[&family=<spec>...][&text=<text>][&display=<display>]
spec
: <family_name>[:<axis_tag_list>@<axis_tuple_list>]
family_name
: השם של משפחת הגופנים
axis_tag_list
: <axis>[,<axis>...] // Sorted alphabetically (en-US locale)
axis
: תג ציר, למשל ital
, wdth
, wght
axis_tuple_list
: <axis_tuple>[;<axis_tuple>...]
axis_tuple
: <value>[,<value>...] // Same length as axis_tag_list
value
: <range>
| <float>
range
: <float>..<float>
float
: ערך בתוך הטווח של הציר התואם
text
: הטקסט שיוצג בגופן המבוקש
display
: auto
| block
| swap
| fallback
| optional
תמיכה בדפדפן מדור קודם
ייתכן שדפדפנים ללא תמיכה בגופנים משתנים לא יוכלו להציג את העיצוב שלכם כמתוכנן. בתמיכה בגופנים אפשר לבדוק את התמיכה בגופנים של הדפדפנים השונים.
על ידי ביצוע שיפור מתקדם, תוכלו להימנע מהתנהגות לא צפויה בדפדפנים ישנים אלה. אפשר להשתמש ב-@supports
שאילתות ב-CSS כדי להגדיר תכונות של גופנים משתנים.
בדוגמה הזו אנחנו רוצים להשתמש במשקל 450 של Textazi Text, אבל נצטרך לעבור בחזרה ל-Standard (משקל 400) או ל-Medium (משקל 500) כשתכונות של גופן משתנה לא נתמכות:
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Markazi+Text:wght@450" />
<style>
* {
font-family: 'Markazi Text';
font-weight: 400;
}
@supports (font-variation-settings: "wght" 450) {
* {
font-family: 'Markazi Text';
font-weight: 450;
}
}
</style>
בקשת ה-CSS Markazi+Text:wght@450
שולחת משקל 450 ללקוחות שתומכים בגופנים ובמשקלים שונים של 400 ו-500 לעומת אלה שלא תומכים בגופנים כאלה. באופן כללי, הגיבויים של טווח הבקשה יהיו זמינים בדפדפנים מדור קודם.
Axis | חזרה למצב ראשוני |
---|---|
ital |
0, 1 |
wght |
100, 200, 300, 400, 500, 600, 700, 800, 900 |
הדוגמאות האלה מראות אילו סגנונות יהיו זמינים בדפדפנים מדור קודם במספר בקשות שונות.
בקשה | סגנונות זמינים בדפדפנים מדור קודם |
---|---|
ital@0 |
ital@0 |
wght@500 |
wght@500 |
wght@432 |
wght@400;500 |
wght@440..560 |
wght@400;500;600 |
גופנים עם משתנים זמינים
כאן נמצאת טבלה של הגופנים המשתנים הזמינים בממשק ה-API של גרסה 2.
קריאה נוספת
- הרשימה המלאה של משפחות הגופנים שסופקו על ידי Google Fonts API ב-Google Fonts.
- מידע נוסף על אופן הפעולה של Google Fonts API מפורט בדף שיקולים טכניים.