דף זה תורגם על ידי Cloud Translation API.

עדכון CSS API

ב-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`

נראה שהדפדפן שלך לא תומך בגופנים משתנים (אפשר). בדפדפן שתומך בווריאציות של גופנים, הטקסט הבא אמור לעבד את צבע ה-Crimson Pro כקבוצת משקל פשוטה – מ-400 עד 500. אנימציות CSS יכולות לשנות את הסגנון של האינטראקציה בצורה חלקה.

אם הדפדפן תומך באופן מלא בגופנים משתנים (caniuse), הטקסט הבא צריך לעבד את מודעת Crimson Pro כקבוצת משקלים חלקה, מ-400 עד 500. אנימציות CSS יכולות לגרום לטקסט להשתנות בקלות בסגנון האינטראקציה.

האינטרנט יפהפה!

סגנונות ספציפיים, כמו משקל

ללא מפרטי סגנון, ממשק ה-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

נראה שהדפדפן שלך לא תומך בגופנים משתנים (caniuse). בדפדפן שתומך בווריאציות של גופנים, הטקסט הבא צריך לעבד את Crimson Pro במשקלים ייחודיים מבחינה חזותית של 400, 450 ו-500.

אם הדפדפן תומך באופן מלא בגופנים משתנים (אפשר), הטקסט הבא צריך לעבד את צבע ה-Crimson Pro במשקל ייחודי: 400, 450 ו-500.

האינטרנט יפהפה!

אופטימיזציה לזמן אחזור ולגודל הקובץ

חשוב על הסגנונות המדויקים שאתם משתמשים בהם. ה-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 מפורט בדף שיקולים טכניים.