Nehmen Sie die variablen Schriftarten auf Google -Schriftarten optimal heraus

Ich habe jahrelang die rekursive Sans & Mono -Schriftfamilie entwickelt (mit einem fantastischen Team!) Und es ist endlich bei Google -Schriftarten verfügbar!

Möchten Sie es sofort verwenden? Hier ist der Einbettencode für die vollständige rekursive variable Schriftfamilie aus Google -Schriftarten (aber für optimale Flexibilität und Leistung lesen Sie weiter!).

 <code><link href="https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,%5Bemail%C2%A0protected%5D,300..1000,0..1,0..1,0..1&display=swap" rel="stylesheet"></code>

Rekursiv begann als mein Typdesign -Master -These bei Kabk Typemedia. Später wurde meine Gießerei, Pfeiltyp, von Google Fonts in Auftrag gegeben, um rekursiv als Open-Source-Schriftart zu vervollständigen und zu veröffentlichen.

Erforschen Sie rekursiv und seine Fähigkeiten bei rekursiv.Design.

Rekursiv ist eine vielseitige Schriftfamilie für Websites und Code und bietet Entwicklern und Designer eine Mischung aus moderner Ästhetik und modernster Schriftart.

Lassen Sie uns klarstellen: Variable Schriftarten enthalten eine Reihe von Stilen in einer einzelnen Datei, mit der Benutzer Stile fließend auswählen können. Diese Bereiche werden als variable Achsen bezeichnet, die Parameter wie Gewicht, Breite, optische Größe, Neigung und mehr darstellen. Mit rekursiver können Sie "Monospakizität" (von Mono bis Sans) und "Casualness" (von linear bis bürsten) kontrollieren. Jede Schriftfamilie kann mehrere Achsen haben, eine wichtige Überlegung von Schlüsseldesign.

Google Fonts hat variable Schriftarten hinzugefügt, aber viele (einschließlich rekursiv) bieten weitaus mehr stilistische Optionen als die Standardschnittstelle. Zur Benutzerfreundlichkeit vereinfacht Google -Schriftarten das Display und zeigt hauptsächlich die "Gewichts -Achse" an. Dies versteckt jedoch die 64 voreingestellten Stile von Rekursiv und fünf variable Achsen. Die Seite von Google Fonts zeigt acht Stile und eine Achse, während rekursiv tatsächlich viel mehr bietet.

Rekursiv kann in vier "Unterfamilien" unterteilt werden:

• SANS LINEAR: Eine Standard-Proportional-Sans-Serif-Schrift (angezeigt auf Google-Schriftarten).
• SANS Casual: Eine proportionale Schriftart "Pinsel Casual".
• Mono -Linear: Eine Standard -Monospace -Schrift.
• Mono Casual: Ein Monospace "Pinsel lässig" Schriftart.

Das Visualisieren ist einfacher als die Beschreibung. Zwei Tabellen (einer für Sans, einer für Mono) veranschaulichen die 64 genannten Instanzen (hier nicht für die Kürze gezeigt). Die Google -Schriftarten -Schnittstelle zeigt nur acht sowie die Gewichtsachse.

Während dieser nur Gewichtsansatz angesichts der vielfältigen Benutzerbasis von Google Fonts verständlich ist, schränkt er das Potenzial der Schrift ein. Die Google -Schriftarten -API bietet eine Lösung.

Variable Schriftarten und deren Effizienz verstehen

Webentwickler wissen, dass sie nicht übergroße JPEGs bedienen sollen. Ähnliche Prinzipien gelten für Schriftarten. Unterlassungszeichen und Verwendung von WOFF2 -Komprimierung reduzieren die Dateigröße.

Variable Schriftarten sind wie Videodateien: Sie enthalten Informationsbereiche (variable Achsen), die auf bestimmte Werte getrimmt oder "angehängt" werden können, wodurch die Dateigröße reduziert werden kann. Im Gegensatz zu Video verwenden Schriftarten Vektorformen. Variable Schriftarten haben mehrere "Quellpositionen" (Keyframes). Stile werden durch mathematisches Interpolieren zwischen diesen Orten (Deltas) erstellt. Das Trimmen einer variablen Schriftart bedeutet, unnötige Deltas zu entfernen.

Zum Beispiel interpoliert die Gelegenheitsachse von Rekursiv zwischen "linearen" und "lässigen" Buchstabenformen. Die Amper- und Glyphenanimation (hier nicht gezeigt) zeigt dies.

Jede hinzugefügte Achse verdoppelt im Allgemeinen die Anzahl der Zeichnungen. Mit der Google -Schriftarten -API können Sie nur die benötigten Achsen auswählen, was zu kleineren Dateigrößen führt.

Variable Achsen -Tags

Achsenabkürzungen sind vier Buchstaben-Tags (Kleinbuchstaben für Microsoft-definierte Achsen, Großbuchstaben für benutzerdefinierte Achsen). Es gibt fünf Standardachsen:

• wght - Gewicht
• wdth - Breite
• opsz - optische Größe
• ital - kursiv
• slnt - Slant

Rekursiv verwendet drei benutzerdefinierte Achsen ( MONO , CASL , CRSV ) plus wght und slnt .

Google -Schriftarten API

Die Google Fonts -Schnittstelle generiert eine URL, die die Google -Schriftarten -API aufruft. Diese URL hat Teile:

1. Die API -URL ( https://fonts.googleapis.com/css2 )
2. Schriftfamilienparameter
3. Schrift im Bereich font-display

Verwenden Sie: Verwenden Sie das reguläre Gewicht des rekursiven (ohne linearen) Gewichts:

 <code>@import url('https://fonts.googleapis.com/css2?family=Recursive&display=swap');</code>

Oder in HTML:

<code><link href="https://fonts.googleapis.com/css2?family=Recursive&display=swap" rel="stylesheet"></code>

Wenden Sie dann die Schrift in CSS an:

 <code>body { font-family: 'Recursive', sans-serif; }</code>

Standard -Achsenwerte: MONO 0 , CASL 0 , wght 400 , slnt 0 , CRSV 0 .

Styles oder Äxte angeben

Die API bietet zwei Ansätze:

1. Listungsachsen und spezifische Werte.
2. Listungs Äxte und Bereiche.

Um einen lässigen Stil zu erhalten, verwenden Sie Recursive:CASL@1 . Für Mono Casual Regular:

 <code>https://fonts.googleapis.com/css2?family=Recursive:CASL,MONO@1,1&display=swap</code>

Für normal und mutig:

 <code>https://fonts.googleapis.com/css2?family=Recursive:wght@400;700&display=swap</code>

Google -Schriftarten dienen häufig einer einzelnen variablen Schriftart, die mehrere angeforderte Stile abdeckt. Für die Produktion fordern nur die erforderlichen Stile an. Die Verwendung von variablen Achsen bietet Flexibilität.

Erhalten Sie die vollständige variable Schriftart

Um die Flexibilität zu maximieren, verwenden Sie variable Achsen. Anstelle von Recursive:wght@400;700 verwenden Sie Recursive:[email protected] (oder Recursive:[email protected] für den vollen Gewichtsbereich). Achsen alphabetisch hinzufügen: Recursive:wght,[email protected],0..1 .

Die voll variable Schriftart -URL:

 <code>https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,[email protected],300..1000,0..1,0..1,0..1&display=swap</code>

In HTML:

 <code><link href="https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,%5Bemail%C2%A0protected%5D,300..1000,0..1,0..1,0..1&display=swap" rel="stylesheet"></code>

Flexibilität und Dateigröße ausbalancieren

Jede Achse erhöht die Dateigröße. Unbenutzte Äxte weglassen. Für Mono -Freizeitstile mit unterschiedlichen Gewichten:

 <code><link href="https://fonts.googleapis.com/css2?family=Recursive:CASL,MONO,wght@1,1,300..1000&display=swap" rel="stylesheet"></code>

(Hinweis: Die oben genannte kann derzeit nicht korrekt funktionieren. Weitere Aktualisierungen finden Sie im Originalartikel.)

Mehrere Schriftfamilien können hinzugefügt werden, alphabetisiert mit Namen.

Verwenden von variablen Schriftarten

Standardachsen verwenden Standard-CSS-Eigenschaften ( font-weight: 425; ). Alle Achsen verwenden font-variation-settings . Für einen MONO Casual, sehr hungrig stiles Stil:

 <code>body { font-weight: 950; font-variation-settings: 'MONO' 1, 'CASL' 1; }</code>

font-variation-settings funktioniert gut mit CSS-benutzerdefinierten Eigenschaften.

Weitere Details zum variablen Schriftdesign finden Sie unter VariableFonts.io und CSS-Tricks.

Variable Schriftleistung

Verwenden Sie alle 64 rekursiven Stile als separate Dateien von ~ 6,4 MB. Die variable Schrift ist ~ 537 kb. Ein subettiertes rekursives WOFF2 mit dem vollen Gewichtsbereich beträgt 60 kb; Ein einzelner Stil ist 25 kb. Die Verwendung von drei Gewichten spart ~ 15 kb mit der variablen Schriftart. Die vollständige variable Schriftuntergruppe beträgt 281 kb. Abgesehen von der Dateigröße bieten variable Schriftarten Designflexibilität. Google -Schriftarten optimiert die Schriftart.

Der Rest des ursprünglichen Artikels ist für die Kürze weggelassen, setzt sich jedoch mit zusätzlichen Informationen über die Verwendung der API, die Erforschung anderer variabler Schriftarten und die Förderung der Arbeit des Autors fort.

Das obige ist der detaillierte Inhalt vonNehmen Sie die variablen Schriftarten auf Google -Schriftarten optimal heraus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!