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