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

עדכון ל-CSS API

ב-Google Fonts יש עכשיו תמיכה מלאה בגופנים משתנים בעדכון ה-API בגרסה 2. אנחנו להסביר איך לקרוא גם למשפחות של גופנים יחידים וגם לקבוצות גופנים מרובות ואיך לציין טווחי הצירים. כדי לבחון לעומק גופנים של משתנים, אפשר לעיין במאמר הזה עלון מאויר באופן אינטראקטיבי מדיוויד ברלו ב-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>

באמצעות דפדפן כדי לפתוח את הקובץ, הדף צריך לעבד את הטקסט "על מנת Web Beautiful", בגופן 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`

נראה שהדפדפן שלך לא תומך בגופנים של משתנים (caniuse). בדפדפן שתומך בווריאציות של גופנים, הטקסט הבא אמור להיות מוצג 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 Bold & מודגש נטוי	`https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,700;1,700`

הגופנים של Google מציגים את כל הסגנונות הזמינים לכל משפחת גופנים.

סגנון ברירת המחדל

אם בקשה לא מציינת מיקום או טווח עבור ציר, ברירת המחדל המיקום יוצג. מיקום ברירת המחדל של הציר הנטוי הוא 0 (רגיל) ו ברירת המחדל של ציר המשקל היא 400 (רגיל).

לגבי משפחות עם צירים שלא מכילים את מיקום ברירת המחדל, בקשות אם לא תציינו מיקומים עבור הצירים האלה, ייכשלו. לדוגמה, כאשר מבקשים משפחה עם ציר משקל שנע בין 500 ל-900, מיקום המשקל חייב להיות שצוין.

משקולות לא סטנדרטיות

בגופנים סטטיים, סגנונות של משקל מוגדרים בדרך כלל ככפולות של 100 (למשל: 300, 400, 700). גופנים משתנים מציעים גם את המשקולות הרגילות וגם ומשקולות ביניים. כדי לעבד משקל ביניים:

https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@450

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

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

רוצים להפוך את האינטרנט ליפהפה!

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

חשוב לדייק בסגנונות שבחרת. ה-API מציג את הסגנונות המבוקשים בקבוצת הגופנים הקומפקטית ביותר. בקשה לסגנונות שלא בשימוש עלולה לגרום למשתמשים כדי להוריד יותר נתוני גופנים ממה שהם צריכים, וכך לגרום לזמן אחזור ארוך יותר. אם משתמשים רק יש 3 משקלים ספציפיים, צריך לציין אותם בבקשה כסגנונות נפרדים. אם להשתמש בטווח רציף של משקלים, לציין את טווח המשקל הזה בבקשה.

שימוש בתצוגת גופן

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

מעבירים את הערך הרצוי בפרמטר display:

https://fonts.googleapis.com/css2?family=Crimson+Pro&display=swap

אופטימיזציה של בקשות הגופנים

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

במקרים כאלה, כדאי לציין ערך text= בגופן כתובת ה-URL של הבקשה. הדבר מאפשר ל-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 תווים. לדוגמה, ¡Hola! מיוצגת כך:

https://fonts.googleapis.com/css2?family=Comfortaa&text=%c2%a1Hola!

לתשומת ליבך, הרכיב 'text= ' אפשר לציין את הפרמטר רק פעם אחת. רלוונטי לכל המשפחות שצוינו בבקשה. במקרה הצורך, אפשר להשתמש בבקשות API נפרדות פעולות אופטימיזציה שונות של טקסטים בין משפחות שונות.

יצירת כתובות URL של API

קפדנות

באופן כללי, ב-CSS API המעודכן, הן מחמירות יותר בנוגע לבקשות לעומת ה-API המקורי של CSS.

הנחיות כלליות:

הצגת רשימת הצירים לפי סדר האלפבית (לוקאל אחד (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

תמיכה בדפדפן מדור קודם

ייתכן שדפדפנים ללא תמיכה בגופנים משתנים לא יוכלו להציג את העיצוב שלך כמתוכנן. בודקים את התמיכה בגופנים של משתנים בדפדפנים בcaniuse.

על ידי תרגול של שיפור מתקדם, תוכלו להימנע מהתנהגות לא צפויה בדפדפנים הישנים האלה. שימוש בפורמט @supports של שאילתות ב-CSS שלכם כדי להגביל תכונות של גופנים משתנים.

בדוגמה זו, אנחנו רוצים להשתמש במשקל 450 של Markazi Text, אבל נצטרך חוזרים ל'רגיל (משקל 400)' או ל'בינוני' (משקל 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`

גופנים זמינים של משתנים

כאן אפשר למצוא טבלה של הגופנים של המשתנים שזמינים ב-v2 API.

קריאה נוספת

לרשימה המלאה של משפחות גופנים שסופקו על ידי Google Fonts API, Google Fonts.
למידע נוסף על אופן הפעולה של Google Fonts API הדף שיקולים טכניים.