CSS API-Aktualisierung

Google Fonts unterstützt ab jetzt in Version 2 des API-Updates variable Schriftarten. Wir werden wird erklärt, wie einzelne und mehrere Schriftfamilien aufgerufen werden und wie Achsenbereiche. Einen detaillierten Einblick in variable Schriftarten erhalten Sie in diesem interaktiv illustrierte Broschüre von David Berlow von TypeNetwork.

Neuerungen

Alles beginnt mit einer neuen Basis-URL:

https://fonts.googleapis.com/css2

Die Syntax zur Angabe von Stilen innerhalb jeder Familie wurde geändert, um zu beschreiben, variabler Schrift „Design-Bereiche“.

Kurzanleitungen

Kopieren Sie diesen HTML-Code und fügen Sie ihn in eine Datei ein:

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

Wenn Sie die Datei in einem Browser öffnen, sollte die Seite den Text „Das Web Beautiful", in der Schriftart Crimson Pro.

Das Web schön!

Mehrere Familien

Wenn Sie mehrere Familien anfordern möchten, geben Sie für jede Familie den Parameter family= an.

Um die Schriftarten anzufordern, Crimson Pro und Literata

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

Kopieren Sie diesen HTML-Code und fügen Sie ihn in eine Datei ein:

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

Wenn Sie die Datei in einem Browser öffnen, sollte die Seite den Text „Making the Web Beautiful“ zuerst in Crimson Pro und dann in Literata rendern.

Das Web schön!
Das Web schön!

Achsenbereiche

Variable Schriftarten bieten fortlaufende Vielfalt an Stilen, häufig ohne zusätzliche Latenz. Dies ist für responsives Design relevant. Diese dynamische Typografie verwendet fortlaufende Stilbereiche und bietet eine Seite zwischen 100 und 900 gewichtet und auf Basis bestimmter Bedingungen.

Wenn Sie einen Bereich einer variablen Schriftachse anfordern möchten, führen Sie die beiden Werte mit .. zusammen

Schriftart Anfrage
Rubinrot [wght 200-900] https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200..900
Purpurrotes Pro-Kursiv [wght 200-900] https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@1,200..900
Purpurrotes Pro Bold, kursiv und [wght 200-900] https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,700
Ihr Browser unterstützt scheinbar keine variablen Schriftarten (caniuse). In einem Browser, der Schriftvariationen unterstützt, sollte der folgende Text Purpurrotes Pro in Form eines sanften Satzes von Gewichten von 400 bis 500. CSS-Animationen können verändert den Stil bei der Interaktion nahtlos.
Wenn Ihr Browser variable Schriftarten (caniuse) vollständig unterstützt, sollte der folgende Text Crimson Pro als glatte Reihe von Gewichtungen 400 bis 500. CSS-Animationen können dazu führen, dass der Text bei einer Interaktion nahtlos den Stil ändert.
Das Web schön!
Das Web schön!
Das Web schön!
Das Web schön!
Das Web schön!
Das Web schön!

Individuelle Stile, wie z. B. Gewicht

Ohne Stilspezifikationen stellt die API den Standardstil des Angeforderte Familie. Um andere individuelle Stile wie z. B. bestimmte Gewichtungen anzufordern, An den Namen der Schriftfamilie einen Doppelpunkt (:) anhängen, gefolgt von einer Liste der Achsen Property-Keywords in alphabetischer Reihenfolge, ein @-Zeichen und eine oder mehrere Listen für diese Achseneigenschaften.

Diese Beispiele zeigen das in der Praxis.

Schriftart Anfrage
Purpurrotes Pro (Standardeinstellung) https://fonts.googleapis.com/css2?family=Crimson+Pro
Purpurrotes Pro Bold https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700
Rubinrot Pro Regular und Fett https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;700
Rubinrot und Pro Bold Fett-kursiv https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,700;1,700

Unter Google Fonts werden alle für die einzelnen Schriftfamilien verfügbaren Stile aufgelistet.

Standardstil

Wenn in einer Anfrage keine Position oder kein Bereich für eine Achse angegeben ist, wird der Standardwert Position verwendet. Die Standardposition der kursiven Achse ist 0 (normal) und ist der Standardwert für die Gewichtsachse 400 (regulär).

Bei Familien mit Achsen, die nicht die Standardposition enthalten, keine Positionen für diese Achsen angeben, schlagen fehl. Wenn Sie beispielsweise ein Familie mit einer Gewichtungsachse zwischen 500 und 900, muss die Gewichtungsposition angegeben ist.

Nicht standardmäßige Gewichte

Bei statischen Schriftarten werden die Schriftstärken normalerweise als Vielfache von 100 angegeben. (z.B. 300, 400, 700). Variable Schriftarten bieten sowohl die Standardstärke mit einer Zwischengewichtung. So rendern Sie eine Zwischengewichtung:

https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@450
Ihr Browser unterstützt scheinbar keine variablen Schriftarten. (caniuse) In einem Browser der Schriftvariationen unterstützt, sollte der folgende Text Purpur dargestellt werden. Profi mit visuell unterschiedlichen Gewichten von 400, 450 und 500.
Wenn Ihr Browser variable Schriftarten vollständig unterstützt (caniuse) enthält den Parameter sollten Sie Crimson Pro mit einer visuellen Gewichtung von 400 darstellen, 450 und 500.
Das Web schön!
Das Web schön!
Das Web schön!

Latenz und Dateigröße optimieren

Geben Sie genau an, welche Stile Sie verwenden. Die API liefert die angeforderten Stile der kompaktesten Schriftarten. Wenn Sie nicht verwendete Designs anfordern, kann dies dazu führen, mehr Schriftartdaten herunterladen, was zu einer höheren Latenz führt. Wenn Sie nur 3 bestimmte Gewichtungen, geben Sie diese in Ihrer Anfrage als einzelne Stile an. Wenn Sie kontinuierlichen Gewichtsbereich verwenden, geben Sie diesen Gewichtsbereich in Ihrer Anfrage an.

Schriftartanzeige verwenden

Das Feld font-display können Sie festlegen, was geschieht, während die Schriftart noch andernfalls nicht verfügbar. Die Angabe eines anderen Werts als dem Standardwert auto ist die normalerweise angemessen sind.

Übergeben Sie den gewünschten Wert im Parameter display:

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

Schriftartanfragen optimieren

Wenn Sie eine Webschriftart auf Ihrer Website oder in Ihrer Anwendung verwenden möchten, welche Buchstaben Sie benötigen. Dies geschieht häufig, wenn Sie eine in einem Logo oder in einer Überschrift.

In diesen Fällen empfiehlt es sich, den Wert text= in Ihrer Schriftart festzulegen. -Anforderungs-URL Dadurch kann Google Fonts eine Schriftartdatei zurückgeben, die für Ihre Anfrage. In einigen Fällen kann die Größe der Schriftartdatei dadurch um bis zu 90%.

Fügen Sie einfach text= zu Ihrer API-Anfrage hinzu, um diese Funktion zu verwenden. Wenn beispielsweise Sie nur Inconsolata für den Titel Ihres Blogs verwenden, können Sie den Titel sich selbst als Wert von text=. So könnte die Anfrage aussehen:

https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello

Wie bei allen Abfragezeichenfolgen sollten Sie den Wert URL-codieren:

https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello%20World

Diese Funktion funktioniert auch mit internationalen Schriftarten, sodass Sie UTF-8 angeben können. Zeichen. ¡Hola! wird beispielsweise so dargestellt:

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

Beachten Sie, dass das Feld 'text=' kann nur einmal angegeben werden. Gilt für alle Familien in der Anfrage. Verwenden Sie bei Bedarf separate API-Anfragen. verschiedene Textoptimierungen für mehrere Familien verwenden.

API-URLs erstellen

Strenge

Allgemein gilt, dass bei der aktualisierten CSS API die Anforderungen von Anfragen strenger sind. als die ursprüngliche CSS API.

Allgemeine Richtlinien:

  • Achsen alphabetisch auflisten (Sprache en-US)
  • Achsenwertgruppen (d.h. Tupel) müssen numerisch sortiert werden
  • Tupel dürfen sich nicht überschneiden oder sich nicht berühren (z.B. wght 400..500 und 500..600)

API-URL-Spezifikation

/css2?family=<spec>[&family=<spec>...][&text=<text>][&display=<display>]

spec: <family_name>[:<axis_tag_list>@<axis_tuple_list>]

family_name: Name der Schriftfamilie

axis_tag_list: <axis>[,<axis>...] // Sorted alphabetically (en-US locale)

axis: Ein Achsen-Tag, z.B. 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: ein Wert innerhalb des Bereichs der entsprechenden Achse

text: Der Text, der in der angeforderten Schriftart angezeigt wird

display: auto | block | swap | fallback | optional

Unterstützung für Legacy-Browser

Browser, in denen keine variable Schriftart unterstützt wird, können Ihr Design möglicherweise nicht als beabsichtigt ist. Prüfen Sie, ob verschiedene Schriftarten in Browsern auf Caniuse unterstützt werden.

Durch Progressive Enhancement können Sie unerwartetes Verhalten bei diesen älteren Browsern vermeiden. @supports verwenden in Ihrem CSS an, um Funktionen mit variabler Schriftart zu steuern.

In diesem Beispiel möchten wir den Markazi-Text mit der Gewichtung 450 verwenden, auf Regulär (Gewichtung 400) oder Mittel (Gewichtung 500) zurückgreifen, wenn Schriftartenfunktionen nicht unterstützt werden:

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

Die CSS-Anfrage Markazi+Text:wght@450 sendet die Gewichtung 450 an Clients, die den variablen Schriftarten und Schriftstärken 400 und 500 auswählen. Im Allgemeinen Fallbacks im Bereich Ihrer Anfrage sind auch in älteren Browsern verfügbar.

Achse Alternativen
ital 0, 1
wght 100, 200, 300, 400, 500, 600, 700, 800, 900

Diese Beispiele zeigen, welche Stile in älteren Browsern für einige unterschiedliche Anträge stellen.

Anfrage In älteren Browsern verfügbare Stile
ital@0 ital@0
wght@500 wght@500
wght@432 wght@400;500
wght@440..560 wght@400;500;600

Verfügbare variable Schriftarten

Eine Tabelle der in der API Version 2 verfügbaren Variablenschriftarten finden Sie hier.

Weitere Informationen

  • Eine vollständige Liste der von der Google Fonts API bereitgestellten Schriftfamilien finden Sie unter Google Fonts:
  • Weitere Informationen zur Funktionsweise der Google Fonts API auf der Technische Überlegungen.