Flüssige Typografie ist eine schicke Art und Weise der „Beschreibung von Schrifteigenschaften wie Größe oder Zeilenhöhe, die sich fließend entsprechend der Größe des Ansichtsfensters skalieren“. Es ist auch unter anderen Namen bekannt, wie reaktionsfähige Typografie, flexible Schrift, flüssige Schrift, Typografie in Ansichtsfenstergröße, flüssige Typografie und sogar reaktionsschneller Anzeigetext.
Hier ist ein Beispiel für flüssige Typografie die Sie live spielen können (mit freundlicher Genehmigung von MDN-Dokumentation). CSS-Tricks hat flüssige Typografie behandelt auch ausgiebig. Aber hier geht es nicht darum, Sie in die flüssige Typografie einzuführen, sondern wie man sie benutzt. Genauer gesagt möchte ich Ihnen zeigen, wie Sie flüssige Typografie in WordPress 6.1 implementieren, das kürzlich eine Funktion für flüssige Schriften direkt im WordPress-Blockeditor eingeführt hat.
Öffne dein style.css Datei, Schlag in einer Stilregel mit Phantasie clamp()-ing auf dem font-size Eigentum, und gut zu gehen, nicht wahr? Sicher, das wird Ihnen flüssigen Text geben, aber um Blockeditor-Steuerelemente zu erhalten, die es ermöglichen, flüssigen Text überall auf Ihrer WordPress-Site anzuwenden? Das erfordert in diesen blockierten Tagen einen anderen Ansatz.
Flüssige Typografieunterstützung in Gutenberg
Einige Entwickler von WordPress-Themes haben die clamp() Funktion zum Definieren einer Flüssigkeit font-size, in ihren WordPress-Themen, sogar in neueren „Block“-Themen wie z Zwanzig zweiundzwanzig, Zwanzig DreiundzwanzigUnd andere.
Aber das Gutenberg-Plugin – dasjenige, das die experimentelle Entwicklung für WordPress-Block- und Site-Editor-Funktionen enthält – führte die Unterstützung für flüssige Typografie ein ab Version 13.8. Das öffnete die Tür für die Implementierung auf Themenebene, sodass Fluid Type direkt im Blockeditor auf bestimmte Elemente und Blöcke angewendet werden kann. CSS-Tricks wurde in der sogar gelobt Anfrage ziehen das hat die Funktion zusammengeführt.
Diese Arbeit wurde Teil von WordPress Core in WordPress 6.1. Rich Tabor, einer der früheren Befürworter der fließenden Typografie im Blockeditor, sagt:
[Fließende Typografie] ist auch ein Teil davon, WordPress leistungsfähiger, aber nicht komplizierter zu machen (was wir alle wissen, ist eine ziemliche Herausforderung). […] Fließende Typografie funktioniert einfach. Eigentlich finde ich es super.
Dieser Machen Sie WordPress-Post-Highlights Der Ansatz zur Unterstützung der Funktion auf Blockebene, sodass standardmäßig eine flüssige Schriftgröße dynamisch auf Blöcke angewendet wird. Es gibt einige Vorteile dazu natürlich:
- Es bietet Themenautoren eine Möglichkeit, flüssige Typografie zu aktivieren, ohne sich Gedanken über die Implementierung im Code machen zu müssen.
- Es wendet flüssige Typografie auf spezifische typografische Einheiten wie Elemente oder Blöcke auf wartbare und wiederverwendbare Weise an.
- Es ermöglicht Flexibilität in Bezug auf Schriftgrößeneinheiten (z
px,rem,emund%).
Da diese neue Funktion nun standardmäßig im WordPress-Blockeditor verfügbar ist, können Theme-Autoren eine einheitliche fließende Typografie anwenden, ohne zusätzlichen Code schreiben zu müssen.
Blöcke, die Typografie- und Abstandseinstellungen unterstützen
Gutenberg 14.1 veröffentlicht am 16. September 2022, und führte typografische Einstellungen für eine Reihe von Blöcken ein. Das bedeutet, dass die Texteinstellungen für diese Blöcke zuvor in CSS festgelegt wurden und auch in CSS geändert werden mussten. Aber diese Blöcke bieten jetzt Schrift- und Abstandssteuerelemente in der Blockeditor-Oberfläche.
Diese Arbeit soll derzeit zu WordPress 6.1 hinzugefügt werden, wie in beschrieben diesen WordPress-Blogbeitrag erstellen. Und damit ist eine erweiterte Anzahl von Blöcken mit Typografieunterstützung verbunden.
Flüssigen Typ in einem WordPress-Blockdesign deklarieren
Wie setzen wir also diese neue flüssige Typografie in WordPress ein? Die Antwort ist drin theme.json, eine neue Datei speziell zum Blockieren von Designs, die eine Reihe von Designkonfigurationen in Schlüssel:Wert-Paaren enthält.
Schauen wir uns eine Regel für eine große Schriftart an theme.json woher contentSize: 768px und wir arbeiten mit a widesize: 1600px Layout. So können wir ein CSS spezifizieren font-size Verwendung der clamp() Funktion:
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "768px",
"wideSize": "1600px"
},
"typography": {
"fontSizes": [
{
"name": "Large",
"size": "clamp(2.25rem, 6vw, 3rem)",
"slug": "large"
}
]
}
}Nur ab WordPress 6.1 rem, em und px Einheiten werden unterstützt.
Das ist großartig und funktioniert, aber mit der neuen Fluidtyp-Funktion würden wir eigentlich einen anderen Ansatz verwenden. Zunächst entscheiden wir uns für flüssige Typografie settings.typography, die eine neue hat fluid Eigentum:
"settings": {
"typography": {
"fluid": true
}
}Dann spezifizieren wir unsere settings.fontSizes wie früher, aber mit einem neuen fluidSize Eigenschaft, wo wir die setzen können min und max Größenwerte für unser Flüssigkeitssortiment.
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "768px",
"wideSize": "1600px"
},
"typography": {
"fontSizes": [
{
"size": "2.25rem",
"fluidSize": {
"min": "2.25rem",
"max": "3rem"
},
"slug": "large",
"name": "Large"
}
]
}
}Das ist es wirklich. Wir haben gerade flüssige Schrift zu einer Schriftgröße namens „Groß“ mit einem Bereich hinzugefügt, der bei beginnt 2.25rem und skaliert bis zu 3rem. Jetzt können wir die Schriftart „Groß“ auf jeden Block mit Schriftarteinstellungen anwenden.
Wie funktioniert das unter der Haube? Rich Tabor bietet eine schöne Erklärung, Wie tut diese Pull-Anforderung in GitHub. Kurz gesagt, WordPress konvertiert die theme.json Eigenschaften in die folgende CSS-Regel:
.has-large-font-size {
font-size: clamp(36px, calc(2.25rem + ((1vw - 7.68px) * 1.4423)), 48px);
}… die auf das Element angewendet wird, sagen wir einen Absatzblock:
...
Anfangs fand ich es schwierig, das Konzept des CSS zu verstehen und in meinem Kopf zu verinnerlichen clamp() Funktion, ohne auch etwas über die zu lernen min(), max() und calc() Funktionen. Dieses Taschenrechner-Tool hat mir sehr geholfen, insbesondere bei der Bestimmung, welche Werte in meinen eigenen Themenprojekten verwendet werden sollen.
Lassen Sie uns zu Demonstrationszwecken den Rechner verwenden, um unsere zu definieren font-size Bereich, so dass die Größe ist 36px bei a 768px Ansichtsfensterbreite und 48px bei a 1600px Ansichtsfensterbreite.
Der Rechner generiert automatisch das folgende CSS:
/* 36px @ 768px increasing to 48px @ 1600px */
font-size: clamp(36px, calc(2.25rem + ((1vw - 7.68px) * 1.4423)), 48px);Der Taschenrechner bietet Optionen zur Auswahl von Eingabeeinheiten als px, rem und em. Wenn wir wählen rem Einheit generiert der Rechner Folgendes clamp() Wert:
/* 2.25rem @ 48rem increasing to 3rem @ 100rem */
font-size: clamp(2.25rem, calc(2.25rem + ((1vw - 0.48rem) * 1.4423)), 3rem);Diese Minimal- und Maximalwerte entsprechen also dem fluidSize.min und fluidSize.max Werte in theme.jsondem „Vermischten Geschmack“. Seine min Wert wird auf Ansichtsfenster angewendet, die sind 768px breit und unten. Dann ist die font-size wird mit zunehmender Breite des Ansichtsfensters skaliert. Wenn das Ansichtsfenster breiter ist als 1600px, der max angewendet wird und die font-size ist dort gekappt.
Beispiele
Es gibt ausführliche Testanleitung in der zusammengeführten Pull-Anforderung, die die Funktion eingeführt hat. Es gibt noch mehr Prüfanleitungen von Justin Tadlocks Vorab-Post auf Make WordPress.
Beispiel 1: Festlegen einer neuen flüssigen Schriftarteinstellung
Beginnen wir mit Justins Anleitung. Ich habe in einer modifizierten Version der Vorgabe verwendet Twenty Twenty-Three-Thema das ist gerade in der Entwicklung.
Stellen wir zunächst sicher, dass das Gutenberg-Plugin (13.8 und höher) oder WordPress 6.1 ausgeführt wird, und entscheiden Sie sich dann für Fluid Type auf der settings.typography.fluid Eigentum in der theme.json Datei:
{
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "768px",
"wideSize": "1600px"
},
"typography": {
"fluid": true
}
}
}Lassen wir das jetzt fallen settings.typography.fontSizes Beispiele drin:
{
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "768px",
"wideSize": "1600px"
},
"typography": {
"fluid": true
"fontSizes": [
{
"name": "Normal",
"size": "1.125rem",
"fluid": {
"min": "1rem",
"max": "1.5rem"
},
"slug": "normal"
}
]
}
}
}Wenn alles richtig funktioniert, können wir jetzt in den WordPress-Blockeditor gehen und die Schriftarteinstellung „Normal“ auf unseren Block anwenden:
Nett! Und wenn wir dieses Element am Frontend speichern und untersuchen, ist dies das Markup:
Sehr gut. Stellen wir nun sicher, dass das CSS tatsächlich vorhanden ist:
Gut gut. Lassen Sie uns diese benutzerdefinierte CSS-Eigenschaft verfügbar machen, um zu sehen, ob es sich wirklich um Dinge handelt:
Sieht so aus, als ob alles so funktioniert, wie wir es wollen! Schauen wir uns ein anderes Beispiel an…
Beispiel 2: Ausschließen einer Schrifteinstellung aus Flüssigschrift
Folgen wir diesmal dem Anweisungen aus der zusammengeführten Pull-Anforderung mit einer Anspielung auf dieses Beispiel von Carolina Nymark, das zeigt, wie wir flüssige Schrift für eine bestimmte Schriftarteinstellung deaktivieren können.
Früher habe ich die leeres Thema wie in der Anleitung empfohlen und geöffnet theme.json Datei zum Testen. Zuerst entscheiden wir uns genau wie zuvor für den Flüssigkeitstyp:
{
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "768px",
"wideSize": "1000px"
},
"typography": {
"fluid": true
}
}
}Diesmal arbeiten wir mit kleineren wideSize Wert von 1000px statt 1600px. Dies sollte es uns ermöglichen zu sehen, dass der Flüssigkeitstyp in einem genauen Bereich arbeitet.
OK, weiter zum Definieren einiger benutzerdefinierter Schriftgrößen unter settings.typography.fontSizes:
{
"version": 2,
"settings": {
"typography": {
"fluid": true,
"fontSizes": [
{
"size": ".875rem",
"fluid": {
"min": "0.875rem",
"max": "1rem"
},
"slug": "small",
"name": "Small"
},
{
"size": "1rem",
"fluid": {
"min": "1rem",
"max": "1.5rem"
},
"slug": "normal",
"name": "Normal"
},
{
"size": "1.5rem",
"fluid": {
"min": "1.5rem",
"max": "2rem"
},
"slug": "large",
"name": "Large"
},
{
"size": "2.25rem",
"fluid": false,
"slug": "x-large",
"name": "Extra large"
}
]
}
}
}Beachten Sie, dass wir die Fließschriftfunktion nur auf die Schrifteinstellungen „Normal“, „Mittel“ und „Groß“ angewendet haben. „Extra Large“ ist das Seltsame, wo die fluid Objekt ist auf gesetzt false.
Was WordPress von hier aus macht – über die Motor im Gutenberg-Stil — wendet die Eigenschaften an, die wir in CSS festgelegt haben clamp() Funktionen für jede Schriftgrößeneinstellung, die sich für Flüssigschrift entschieden hat, und einen einzelnen Größenwert für die Einstellung „Extra groß“:
--wp--preset--font-size--small: clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 0.24), 1rem);
--wp--preset--font-size--medium: clamp(1rem, 1rem + ((1vw - 0.48rem) * 0.962), 1.5rem);
--wp--preset--font-size--large: clamp(1.5rem, 1.5rem + ((1vw - 0.48rem) * 0.962), 2rem);
--wp--preset--font-size--x-large: 2.25rem;Lassen Sie uns das Markup am Frontend überprüfen:
Guter Start! Lassen Sie uns bestätigen, dass die .has-x-large-font-size Klasse ist vom Flüssigkeitstyp ausgeschlossen:
Wenn wir die aussetzen --wp--preset--font-size--x-large Variable, wir werden sehen, dass sie auf eingestellt ist 2.25rem.
Genau das wollen wir!
Blockthemen, die flüssige Typografie unterstützen
Viele WordPress-Themes nutzen bereits die clamp() Funktion für flüssige Schrift sowohl in Block- als auch in klassischen Themen. Ein gutes Beispiel für die Verwendung flüssiger Typografie ist die kürzlich veröffentlichte Twenty Twenty-Three-Standardthema.
Ich habe alle Blockthemen von überprüft WordPress-Block-Theme-Verzeichnis, prüfen theme.json Datei jedes Themas und um zu sehen, wie viele Blockthemen derzeit flüssige Typografie unterstützen – nicht die neue Funktion, da sie zum jetzigen Zeitpunkt noch im Gutenberg-Plugin enthalten ist – mit dem CSS clamp() Funktion. Von den 146 Themen, die ich überprüft habe, verwendeten die meisten von ihnen a clamp() Funktion zum Definieren von Abständen. Etwas mehr als die Hälfte davon verwendet clamp() Schriftgrößen zu definieren. Das Alara Das Thema ist das einzige, das verwendet werden kann clamp() zur Definition der Layout-Containergrößen.
Verständlicherweise enthalten nur wenige kürzlich veröffentlichte Themen die neue Funktion für flüssige Typografie. Aber hier sind die, die ich gefunden habe, die es definieren theme.json:
Und wenn Sie meinen vorherigen Post hier über CSS-Tricks lesen, die TT2 Gopher-Blöcke Das Thema, das ich für die Demo verwendet habe, wurde ebenfalls aktualisiert, um die Funktion für flüssige Typografie zu unterstützen.
Ausgewählte Reaktionen auf die Fluid-Typografie-Funktionen von WordPress
Flüssige Typografie in WordPress auf Einstellungsebene zu haben, ist super aufregend! Ich dachte, ich würde einige Gedanken von Leuten in der WordPress-Entwickler-Community teilen, die es kommentiert haben.
Matias Ventura, der leitende Architekt des Gutenberg-Projekts:
Als eine der größeren Bemühungen zur Veröffentlichung wunderschön reichhaltiger Seiten in WordPress ist flüssige Typografie ein ziemlich großer Erfahrungsgewinn sowohl für die Leute, die mit WordPress bauen – als auch für diejenigen, die den Inhalt konsumieren.
Automatischer Entwickler Ramon Dodd kommentierte im Pull-Request:
Vergleichen Sie diese Idee mit Schriftgrößen, die auf bestimmte Ansichtsfenstergrößen reagieren, wie z. B. die von definierten Medien-Anfragen, aber tun Sie nichts zwischen diesen Größen.
theme.jsonermöglicht es Autoren bereits, ihre eigenen fließenden Schriftgrößenwerte einzufügen. Das wird sich nicht ändern, aber diese PR bietet es Leuten an, die sich nicht um die Implementierungsdetails kümmern wollen.
Nick Croft, Autor von GenesisWP:
Brian Garner, Designer und Principal Developer Advocate bei WPEngine:
Ein paar Entwickler think einige Funktionen sollten ein Opt-in sein. Jason Christ von Automattic sagt:
Ich liebe die Kraft der flüssigen Typografie, aber ich glaube auch nicht, dass sie einfach standardmäßig aktiviert sein sollte. Seine Verwendung (und die Einzelheiten dazu) sind wichtige Entwurfsentscheidungen, die sorgfältig getroffen werden sollten.
Sie können auch eine Reihe weiterer Kommentare im offiziellen finden Testanleitung für die Funktion.
Wrapping up
Die Fluid-Typografie-Funktion in WordPress ist noch in aktiver Entwicklung zum Zeitpunkt dieses Schreibens. Im Moment sollten Themenautoren damit fortfahren, es zu verwenden, aber mit Vorsicht und einige mögliche Änderungen erwarten, bevor es offiziell veröffentlicht wird. Justin warnt Theme-Autoren, die diese Funktion verwenden, und schlägt vor, die folgenden zwei GitHub-Probleme im Auge zu behalten:
Es gibt auch noch jede Menge laufenden Arbeiten über Typografie und andere designbezogene WordPress-Tools. Wenn Sie interessiert sind, sehen Sie sich das an Typografie-Tracking-GitHub-Ticket und Design-Tools im Zusammenhang mit GitHub-Problemen.
Downloads
Ich habe die folgenden Artikel bei der Recherche zu Fluid Type und dazu verwendet, wie WordPress es als Feature implementiert.
