Finden Sie es mühsam, den überblick über mehrere Schriftartdateien für verschiedene St?rken und Stile zu behalten? Das Erstellen unterschiedlicher Dateien für normale, fette, kursive und andere Schriftartvarianten kann für Webdesigner eine Herausforderung sein. Dies verkompliziert den kreativen Prozess und verstopft ihren Arbeitsablauf. Wie w?re es, alle diese Varianten in einer Datei zusammenzufassen?

Hier kommen variable Schriftarten ins Spiel. Variable Schriftarten sind eine bahnbrechende Weiterentwicklung der OpenType-Schriftarttechnologie, die es erm?glicht, in einer Schriftartdatei mehrere Variationen zu enthalten, z. B. normal, fett und kursiv. Dies bedeutet, dass Designer nur mit einer Datei arbeiten müssen, um auf alle erforderlichen St?rken, Stile und Breiten zugreifen zu k?nnen. Diese Erfindung macht es einfach, Eigenschaften wie Gewicht, Breite und Neigung st?ndig und problemlos zu ?ndern, was den Designprozess rationalisiert und kreative Freiheit f?rdert.

Am Beispiel der Schriftart ?Kyiv Sans“ untersucht dieser Artikel die Relevanz verschiedener Schriftarten in CSS und zeigt, wie wichtig Eigenschaften wie Gewicht und sogar nicht standardm??ige Schriftartvarianten wie MIDL sind. Mit diesen Tools lernen wir, wie man dynamische und ?sthetisch beeindruckende Typografie in CSS erstellt.

Einführung in variable Schriftarten

Die technologische Architektur variabler Schriftarten erm?glicht Designern und Entwicklern die sofortige Steuerung dieser typografischen Merkmale mithilfe von CSS und erm?glicht so genaue ?nderungen, um sie an die besonderen Anforderungen eines Projekts anzupassen. Dies verbessert die Webleistung, indem die Ladezeiten erheblich verkürzt und viele statische Schriftartdateien durch eine einzige Datei mit variablen Schriftarten ersetzt werden.

Mit ihrem Grad an Flexibilit?t und Genauigkeit, der bei herk?mmlichen statischen Schriftartdateien bisher unbekannt war, stellen variable Schriftarten eine wichtige Entwicklung in der typografischen Technologie dar. Im Gegensatz zu herk?mmlichen Schriftarten, die für jeden Stil und jede St?rke separate Dateien erfordern, erfassen variable Schriftarten mehrere Stile in einer skalierbaren Datei. Dies wird mit dem OpenType-Schriftstil erreicht, der eine konstante Variation entlang einer oder mehrerer Achsen erm?glicht – etwa Gewicht, Breite und optische Gr??e.

Vorteile variabler Schriftarten in CSS

Wir zeigen Ihnen, wie Sie mit diesen Tools dynamische und ?sthetisch ansprechende CSS-Typografie erstellen. Schauen wir uns ein paar Beispiele an:

Effizienz: Durch die Kombination mehrerer Schriftarten in einer einzigen Datei minimieren variable Schriftarten HTTP-Anfragen, beschleunigen das Laden von Seiten und die Gesamteffizienz.

Flexibilit?t:Designer k?nnen die Typografie pr?zise ?ndern, um sie an unterschiedliche Designkontexte und Benutzerpr?ferenzen anzupassen, da sie Eigenschaften wie Wght und benutzerdefinierte Eigenschaften wie MIDL und CONT genau steuern k?nnen.

Sanfte überg?nge: Variable Schriftarten erm?glichen dynamische ?nderungen an Schriftarten und vermeiden abrupte Wechsel zwischen einzelnen Schriftartdateien. Dadurch sind überg?nge zwischen den Schriftstilen flie?end und flie?end.

Responsive Typografie: Variable Schriftarten erm?glichen eine responsive Typografie, indem sie Anpassungen basierend auf der Gr??e des Ansichtsfensters oder anderen benutzerdefinierten Parametern erm?glichen und so eine optimale Lesbarkeit und ?sthetik auf allen Ger?ten gew?hrleisten.

Dynamische Typografie: Variable Schriftarten erm?glichen Echtzeit?nderungen je nach Benutzerinteraktion oder Umgebungsbedingungen und unterstützen so die Dynamik, verbessern die Benutzereinbindung und erzeugen immersive Erlebnisse.

Barrierefreiheit: Eine gr??ere Auswahl an typografischen Optionen erm?glicht die Anpassung und ?nderung von Text, um Lesbarkeit und Lesbarkeit auf verschiedenen Ger?ten und Benutzerpr?ferenzen sicherzustellen.

?sthetik: Im Web inspirieren variable Schriftarten kreative Designideen und fordern typografische Grenzen heraus, wodurch neue M?glichkeiten für typografischen Ausdruck und Experimente er?ffnet werden.

Skalierbarkeit: Variable Schriftarten eignen sich perfekt für responsives Design und garantieren, dass der Text in jeder Gr??e und Aufl?sung klar und lesbar ist, da sie ohne Qualit?tsverlust skalierbar sind.

Einführung in das Konzept der responsiven und dynamischen Typografie mit variablen Schriftarten

Modernes Webdesign erm?glicht es Designern, mithilfe reaktionsf?higer und dynamischer Typografie mit wechselnden Schriftarten flexiblere und faszinierendere typografische Erlebnisse zu schaffen. Lassen Sie uns die Ideen analysieren:

Variablen in Schriftarten: Variable Schriftarten sind eine einzelne Schriftartdatei mit mehreren Varianten einer Schriftart, einschlie?lich wght und den speziellen Eigenschaften MIDL und CONT. Variable Schriftarten bieten mehr Freiheit und Effizienz bei der Typografiegestaltung als herk?mmliche Schriftarten, die für jeden Stil unterschiedliche Dateien erfordern und flie?ende überg?nge zwischen diesen Varianten erm?glichen.

Responsive Typografie: Das Entwerfen von Text, der problemlos in viele Bildschirmgr??en, Aufl?sungen und Anzeigeumgebungen passt, wird als responsive Typografie bezeichnet. Von gro?en Desktop-Computern bis hin zu Mobiltelefonen und allem dazwischen garantiert dies beste Lesbarkeit und ?sthetik auf vielen Ger?ten. Dynamische Schriftgr??e, Zeilenabstand und andere typografische ?nderungen tragen dazu bei, dass responsive Typografie das Benutzererlebnis und die Zug?nglichkeit verbessert.

Dynamische Typografie: Dynamische Typografie verbessert die responsive Typografie durch die Einbindung von Interaktion und Animation in das typografische Design. JavaScript und CSS (Cascading Style Sheets) helfen Designern bei der Entwicklung von Schriftarten, die zu Inhalts?nderungen, Benutzerinteraktionen oder Scrollverhalten passen. Dynamische Typografie nutzt Komponenten wie wght, MIDL und CONT, um visuelle Attraktivit?t und Interaktivit?t zu erzeugen, die Aufmerksamkeit der Benutzer zu lenken und sie zu fesseln.

Designer schaffen reichhaltige, vielseitige und immersive Online-Typografieerlebnisse, indem sie dynamische und flexible Typografiemethoden mit unterschiedlichen Schriftarten kombinieren. Ob es darum geht, die Schriftart als Reaktion auf Benutzeraktivit?ten dynamisch zu ?ndern, Textelemente zu animieren, um wichtige Informationen hervorzuheben, oder die Schriftst?rke und -gr??e basierend auf den Bildschirmabmessungen anzupassen, dieser Ansatz bietet viele M?glichkeiten für Kreativit?t und Erfindungsreichtum im digitalen Design.

Die verschiedenen Schrifteigenschaften von Kyiv Sans erm?glichen es Designern, faszinierende und makellose typografische überg?nge zu erstellen. Dies verbessert die Interaktion und Benutzerfreundlichkeit von Webmaterialien, indem es deren ?sthetischen Reiz und Nutzen erh?ht.

Grundlegendes zu den Eigenschaften variabler Schriftarten

Verschiedene Schriftarten bieten eine Reihe neuer Eigenschaften, die in herk?mmlichen statischen Schriftarten fehlen. Die Kenntnis dieser Eigenschaften ist notwendig, um das volle Potenzial ver?nderbarer Schriftarten nutzen zu k?nnen. Dies sind einige grundlegende:

Gewicht (Gewicht): Durch die Variation ihres Gewichts entlang einer kontinuierlichen Achse erm?glichen variable Schriftarten nahtlose überg?nge zwischen mehreren Dickenstufen. Designer k?nnen innerhalb einer einzelnen Schriftartdatei einen Bereich von St?rken angeben, von leicht bis ultrafett und alle Punkte dazwischen.

Mittelschichteffekt (MIDL): Mit dieser benutzerdefinierten Achse k?nnen Designer einen Mittelschichteffekt innerhalb der Schriftart ?ndern. Dies kann dem Text einen unverwechselbaren visuellen Stil sowie ein zus?tzliches Ma? an Gestaltungsfreiheit und Erfindungsreichtum verleihen.

Kontrast (CONT): Eine weitere benutzerdefinierte Achse ist CONT, mit der der Kontrast der Schriftart ge?ndert werden kann. Durch die dynamische ?nderung des Kontrasts je nach Designanforderungen kann dies dazu beitragen, die Lesbarkeit und visuelle Attraktivit?t des Textes zu maximieren.

Das Verstehen und Anwenden dieser Eigenschaften wird Designern dabei helfen, visuell beeindruckende Schriftarten zu erstellen. Mit seinen vielf?ltigen Schrifteigenschaften bietet Kyiv Sans spezielle Anpassungsm?glichkeiten, die die Benutzerfreundlichkeit und das Erscheinungsbild der Webtypografie verbessern.

übersicht über zus?tzliche Achsen und Variationen, die in variablen Schriftarten verfügbar sind

Variable Schriftarten bieten über die herk?mmlichen ?nderungen in Gewicht, Breite und optischer Gr??e hinaus ein breites Spektrum an Personalisierungsm?glichkeiten. Nachfolgend finden Sie eine Zusammenfassung der m?glicherweise verfügbaren Achsen und Varianten:

Mehrere registrierte Achsen, die Designer variabler Schriftarten verwenden k?nnen, werden durch die OpenType-Spezifikation definiert:

• Breite (Breite): Diese Achse steuert die horizontale Ausdehnung oder Verdichtung der Schriftart und erm?glicht es Designern, die Breite von Zeichen zu ?ndern. Durch Anpassen dieser Achse k?nnen Designer Schriftarten erstellen, die schmaler oder breiter erscheinen, ohne die Gesamth?he zu ?ndern, was eine flexible Auswahl an komprimierten bis erweiterten Stilen erm?glicht.

• Schr?gstellung (slnt): Diese Achse erm?glicht es Designern, den Zeichen eine kursivartige Neigung zu verleihen, ohne die Struktur der Buchstabenformen zu ver?ndern. Die schr?ge Achse ahmt typischerweise den Effekt traditioneller Kursivschrift nach, beh?lt aber die aufrechten Buchstabenformen bei, was sie für die Erstellung stilistischer Variationen nützlich macht.

• Kursiv (ital): Die Kursivachse wechselt zwischen aufrechter und kursiver Version einer Schriftart. Im Gegensatz zur schr?gen Achse, die nur die Zeichen neigt, beinhaltet die kursive Achse eine komplette Neugestaltung der Zeichen, um die kursive Natur der echten Kursivschrift widerzuspiegeln und einen authentischeren Kursivstil zu bieten.

• Optische Gr??e (opsz): Diese Achse passt das Design der Schriftart an, um die Lesbarkeit bei verschiedenen Gr??en zu optimieren. Beispielsweise k?nnen kleinere Formate für eine bessere Lesbarkeit dickere Striche und offenere Z?hler aufweisen, w?hrend gr??ere Formate raffinierter und filigraner sein k?nnen. Diese Achse ist besonders nützlich für responsive Typografie in verschiedenen Medien.

• Grad (GRAD): Die Gradationsachse erm?glicht subtile Anpassungen der Strichst?rke der Schriftart, ohne den Gesamtabstand zu beeinflussen. Es ist nützlich, um die Lesbarkeit in verschiedenen Druck- oder Bildschirmumgebungen zu verbessern, wo eine leichte Gewichtszunahme oder -abnahme den Kontrast und die Klarheit verbessern kann.

• Kontrast (CNTR): Diese Achse ver?ndert den Kontrast zwischen dicken und dünnen Strichen innerhalb einer Schriftart. Durch Anpassen des Kontrasts k?nnen Designer Schriftarten mit unterschiedlicher Betonung und visueller Wirkung erstellen, von kontrastarmen, humanistischen Stilen bis hin zu kontrastreichen, modernen Designs.

• X-H?he (xhgt): Diese Achse passt die H?he von Kleinbuchstaben im Verh?ltnis zu den Gro?buchstaben der Schriftart an. Eine Vergr??erung der x-H?he kann die Lesbarkeit bei kleinen Gr??en verbessern oder ein moderneres Erscheinungsbild erzeugen, w?hrend eine Verringerung der H?he ein traditionelleres oder formelleres Gefühl hervorrufen kann.

Abgesehen von den registrierten Achsen k?nnen Ersteller variabler Schriftarten ihre eigenen benutzerdefinierten Achsen angeben. Bezüglich Kyiv Sans: Dazu geh?ren:

• Mittelschichteffekt (MIDL): Diese benutzerdefinierte Achse bietet Designern mehr Gestaltungsvielfalt und erm?glicht es ihnen, einen bestimmten Mittelschichteffekt innerhalb der Schrift zu ?ndern und so originelle Stilaspekte hinzuzufügen.

• Kontrast (CONT): Mit dieser benutzerdefinierten Achse k?nnen Sie den Kontrast zwischen dicken und dünnen Strichen in den Buchstabenformen steuern. Designer k?nnen diese Eigenschaft dynamisch ?ndern, um verschiedene Grade typografischer Ausdruckskraft zu erreichen, von ged?mpften Kontrasten bis hin zu offensichtlicheren Abweichungen.

Abgesehen von den registrierten Achsen erm?glicht die Option zum Erstellen neuer Achsen Schriftdesignern ein hohes Ma? an Anpassung und eine umfassende Kontrolle über das Erscheinungsbild und die Eigenschaften einer Schriftart. Benutzerdefinierte Achsen wie MIDL und CONT erm?glichen es Designern beispielsweise, die besonderen Eigenschaften der Schriftart anzupassen, was zu einer flexiblen und ausdrucksstarken Typografie führt. Diese Anpassungen bieten in Kombination mit der Registrierung variabler Schriftarten zahlreiche M?glichkeiten, vielf?ltige typografische Effekte zu erzielen. Mit der Middle Layer Effect (MIDL)-Achse k?nnen Designer beispielsweise eine einzigartige mittlere Ebene innerhalb der Schriftart ?ndern und so unverwechselbare visuelle Qualit?ten hinzufügen, die die künstlerische Freiheit erh?hen. Die Kontrastachse (CONT) hingegen steuert die Variation zwischen dicken und dünnen Strichen und erm?glicht dynamische Anpassungen, die von subtilen bis zu ausgepr?gten Kontrasten reichen. Durch die Interaktion mit Achsen wie ?Gewicht“ und ?Mittelschichteffekt“ k?nnen Designer Texte mit unterschiedlichen St?rken und einzigartigen Stilen erstellen und so eine pr?zise Kontrolle über das Erscheinungsbild der Schriftart erlangen. Ebenso erm?glicht die Kombination von Variationen in Gewicht und Kontrast die Erstellung von Texten mit unterschiedlichem Grad an Fettigkeit und Strichkontrast, wodurch visuelle Wirkung und Lesbarkeit in Einklang gebracht werden. Diese Beispiele zeigen die unübertroffene Freiheit, die sowohl registrierte als auch benutzerdefinierte Achsen bieten und es Designern erm?glichen, Schriftarten an ihre spezifischen ?sthetischen Vorlieben und Designziele anzupassen.

Variable Schriftarten in CSS implementieren

Da Sie nun von den M?glichkeiten ver?nderbarer Schriftarten begeistert sind, wollen wir untersuchen, wie Sie diese in CSS-basierten Webprojekten anwenden k?nnen. CSS bietet die M?glichkeit, die F?higkeiten dieser anpassbaren Schriftarten richtig zu nutzen. Definieren Sie zun?chst die Schriftart mit @font-face, wodurch Sie die unterschiedliche Schriftartdatei und ihre Eigenschaften bereitstellen k?nnen. Sobald die Schriftart festgelegt ist, k?nnen Sie die Achsen der Schriftart mithilfe verschiedener CSS-Attribute dynamisch ?ndern und so die durch unterschiedliche Schriftarten gebotenen M?glichkeiten maximieren.

Besorgen der Schriftart

Zuerst müssen wir die variable Schriftart herunterladen, die wir für unser Projekt wünschen.
Auf einigen Websites im Internet k?nnen wir auf unterschiedliche Schriftartendateien zugreifen. Einige der am h?ufigsten verwendeten Schriftarten-Websites sind wie folgt:

• Typ Netzwerk
• Schrift Eichh?rnchen
• Adobe-Schriftarten?
• Font Spring
• Google-Schriftarten
• Vfonts.com

Für dieses Beispiel gehen wir zu Vfonts.com, um unsere variable Schriftart ?Kyiv Sans“ herunterzuladen. Das Dateiformat ttf oder woff2 funktioniert einwandfrei, in dieser Demonstration verwenden wir jedoch ein ttf. Wenn Sie Ihre Schriftartendatei von ttf in woff2 konvertieren müssen, gehen Sie zu everythingfonts.com:

Der Screenshot oben zeigt, was Sie sehen werden, wenn Sie bei Vfont ankommen.

Wir unterteilen das Projekt in folgende Schritte:

1. Zu vfont navigieren: Besuchen Sie die Website, auf der Ressourcen für variable Schriftarten verfügbar sind.

2. Typ ?Kyiv*“ ausw?hlen: W?hlen Sie die Schriftart ?Kyiv*“ aus. Dadurch werden Sie zu Behance.net weitergeleitet, wo die Schriftart gehostet wird.

3. Zugriff auf den Download-Link: Scrollen Sie auf der Behance-Seite ganz nach unten, um einen Link zum Herunterladen der Schriftart zu finden.

4. Von Google Drive herunterladen: Klicken Sie auf den Download-Link, der Sie zu einem Google Drive-Ordner führt. Laden Sie die Schriftartdatei von dort herunter.

5. Entpacken Sie die Datei: Nach dem Herunterladen entpacken Sie die Datei, um auf ihren Inhalt zuzugreifen.

6. Schriftartenoptionen überprüfen: Der entpackte Ordner enth?lt mehrere Optionen zur Auswahl.

   • Symbole
   • Keine Variable
   • Variable

7. W?hlen Sie die variable Schriftart aus: Konzentrieren Sie sich auf die Dateien, die die variable Schriftart enthalten.

   • Serife
   • Kippen
   • Ohne

8. Sans-Schriftart verwenden: Richten Sie die Sans-Version der Schriftart ein und verwenden Sie sie. Beachten Sie, dass die Sans-Schriftgraddatei 360 KB gro? ist, was der Verwendung von acht nicht variablen Schriftartdateien entspricht.

9. Bewerten Sie den Kompromiss: überlegen Sie, ob sich die Verwendung variabler Schriftarten für Ihr Projekt lohnt. Wenn Sie nur normale, fette und kursive Schriftarten ben?tigen, ist die Verwendung variabler Schriftarten m?glicherweise nicht erforderlich. Wenn Sie jedoch eine erweiterte Kontrolle über Variationen ben?tigen, k?nnen variable Schriftarten sehr nützlich sein.

Hinweis: Die oben genannten Dateien liegen im TTF-Format vor.

Jetzt gehen wir zu VSCode, wo wir ein Vanilla-Vite-Projekt verwenden werden.
Um mit der Arbeit am Projekt beginnen zu k?nnen, müssen Sie die erforderlichen Pakete installieren. Sie müssen die folgenden Schritte ausführen:

1. ?ffnen Sie ein neues Terminal.

2. Führen Sie den Befehl aus
   

   npm create vite@latest
   

3. Nennen Sie Ihr Projekt.

4. Benennen Sie Ihr Paket.

5. W?hlen Sie ein Vanilla-Framework aus.

6. W?hlen Sie die JavaScript-Variante aus.

7. Das Ausführen von npm install hilft Ihnen, sich in das Projekt einzuarbeiten und die erforderlichen Module zu installieren.

8. Nachdem Sie die Abh?ngigkeiten eingerichtet haben, verwenden Sie den folgenden Befehl, um die Anwendung zu starten:
   

   npm run dev
   

9. Besuchen Sie http://localhost:your-port-number, um auf das laufende Programm in Ihrem Browser zuzugreifen.

Sobald wir unser Projekt abgeschlossen haben, verfügen wir über eine Fülle von Scheincode, den wir ?ndern k?nnen, um unsere beabsichtigte Anwendung zu erstellen. Die heruntergeladene variable Schriftart sollte in einem Schriftartenordner abgelegt werden, der im ?ffentlichen Ordner abgelegt wird. Wir werden den gesamten unn?tigen Scheincode in style.css, main.js und index.html ersetzen.

Der index.html-Code sollte etwa so aussehen:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Variable font</title>
  </head>
  <body>
    <div>



<p>From the code above, we're setting up a simple HTML wrapper for our project where the JavaScript will render content in the <div>

<p>The main.js code should look something like this:<br>
</p>

<pre class="brush:php;toolbar:false">import "./style.css";

document.querySelector("#app").innerHTML = `
  <div>
    <h1>



<p>This is where we use document.querySelector() to add content to the element we insert our content into using the id: #</p>

<p>And the style.css code should look something like this:<br>
</p>

<pre class="brush:php;toolbar:false">body {
  font-family: 'Kyiv Sans';
}

@font-face {
  font-family: 'Kyiv Sans';
  src: url('/font/KyivTypeSans-VarGX.ttf');
  font-weight: 0 1000;
  font-display: swap;
}

h1 {
  color: #bd0c0c;
  height: 100vh;
  display: grid;
  place-content: center;
  margin: 0;
  text-align: center;
}

.variable-font {
  font-family: 'Kyiv Sans';
  font-size: 5rem;
  line-height: 1.1;
  font-weight: 100;
  font-variation-settings:
   'wght' 100, 'CONT' 250, 'MIDL' 0;
  transition: font-variation-settings 500ms;  
}

.variable-font:hover {
  font-weight: 1000;
  font-variation-settings:
    'wght' 1000, 'CONT' 250, 'MIDL' -1000;
}

Lassen Sie uns nun erkl?ren, was im obigen Code vor sich geht:

Standardschriftart für den Text festlegen:

npm create vite@latest

• Zweck: Dadurch wird die Standardschriftart für das gesamte Dokument auf ?Kyiv Sans“ festgelegt.
• Auswirkungen: Alle Textelemente im Textk?rper erben diese Schriftart, sofern sie nicht durch spezifischere Stile überschrieben werden.

Definieren der benutzerdefinierten Schriftart:

npm run dev

• Zweck: Mit der @font-face-Regel k?nnen Sie eine benutzerdefinierte Schriftart definieren.
• Schriftartname: Die Schriftart hei?t ?Kyiv Sans“.
• Quelle: Die Schriftartdatei befindet sich unter /font/KyivTypeSans-VarGX.ttf.
• Schriftgewichtsbereich: Diese Schriftart unterstützt einen Bereich von Gewichten von 0 bis 1000 und ist somit eine variable Schriftart.
• Schriftartanzeige: Swap stellt sicher, dass Text sofort mit einer Ersatzschriftart angezeigt wird, bis die benutzerdefinierte Schriftart geladen wird.

Styling des

Element:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Variable font</title>
  </head>
  <body>
    <div>



<p>From the code above, we're setting up a simple HTML wrapper for our project where the JavaScript will render content in the <div>

<p>The main.js code should look something like this:<br>
</p>

<pre class="brush:php;toolbar:false">import "./style.css";

document.querySelector("#app").innerHTML = `
  <div>
    <h1>



<p>This is where we use document.querySelector() to add content to the element we insert our content into using the id: #</p>

<p>And the style.css code should look something like this:<br>
</p>

<pre class="brush:php;toolbar:false">body {
  font-family: 'Kyiv Sans';
}

@font-face {
  font-family: 'Kyiv Sans';
  src: url('/font/KyivTypeSans-VarGX.ttf');
  font-weight: 0 1000;
  font-display: swap;
}

h1 {
  color: #bd0c0c;
  height: 100vh;
  display: grid;
  place-content: center;
  margin: 0;
  text-align: center;
}

.variable-font {
  font-family: 'Kyiv Sans';
  font-size: 5rem;
  line-height: 1.1;
  font-weight: 100;
  font-variation-settings:
   'wght' 100, 'CONT' 250, 'MIDL' 0;
  transition: font-variation-settings 500ms;  
}

.variable-font:hover {
  font-weight: 1000;
  font-variation-settings:
    'wght' 1000, 'CONT' 250, 'MIDL' -1000;
}

• Farbe: Setzt die Textfarbe auf #bd0c0c, einen Rotton.
• H?he: Die H?he ist auf 100vh eingestellt, sodass

  Das Element erstreckt sich über die gesamte H?he des Ansichtsfensters.

  Anzeige: Raster wird für das Layout verwendet und erm?glicht die Verwendung von Rastereigenschaften.

  Inhalt zentrieren: place-content: center zentriert den Inhalt sowohl vertikal als auch horizontal.

  Rand: Der Rand ist auf 0 eingestellt, um alle Standardabst?nde um

  zu entfernen.

  Textausrichtung: Der Text wird horizontal zentriert.

  Stil der .variable-font-Klasse:
  

  body {
    font-family: 'Kyiv Sans';
  }
  

  • Schriftfamilie: Verwendet ?Kyiv Sans“ für den Text.
  • Schriftgr??e: Setzt die Schriftgr??e auf 5rem (relativ zur Schriftgr??e des Stammelements).
  • Zeilenh?he: 1,1 sorgt für einen leichten Abstand zwischen den Zeilen.
  • Schriftst?rke: Anfangs auf 100 eingestellt.
  • Schriftvariationseinstellungen: Verwendet benutzerdefinierte Variationseinstellungen für die variable Schriftart:
    • 'wght' steuert das Gewicht (anfangs 100).
    • ?CONT“ und ?MIDL“ sind benutzerdefinierte Achsen für diese Schriftart, die zun?chst auf 250 bzw. 0 eingestellt sind.
  • übergang: übergeht die Schriftartvariationseinstellungen reibungslos über 500 Millisekunden.

  Hover-Effekt für .variable-font hinzufügen:
  

  npm create vite@latest
  

  • Schriftst?rke beim Schweben: ?ndert sich auf 1000, wenn der Mauszeiger über das Element bewegt wird.
  • Schriftvariationseinstellungen beim Hover: Aktualisiert die Variationseinstellungen auf:
    • 'wght' auf 1000
    • 'CONT' bleibt 250
    • ?MIDL“ ?ndert sich in -1000
  • Effekt: Erzeugt einen dynamischen und interaktiven visuellen Effekt, wenn der Benutzer mit der Maus über den Text f?hrt, was die Flexibilit?t der variablen Schriftart hervorhebt.

  Am Ende sieht unser Ergebnis ungef?hr so ??aus:
  

  Responsive Typografie mit variablen Schriftarten erstellen

  Da Designer eine perfekte Anpassung an viele Ger?te und Bildschirmgr??en erreichen k?nnen, ver?ndert responsive Typografie mit verschiedenen Schriftarten das Online-Design. Unübertroffene Vielseitigkeit entsteht durch variable Schriftarten, die st?ndige ?nderungen der Schriftartattribute, einschlie?lich St?rke, Breite und Kontrast, innerhalb einer einzigen Schriftartdatei erm?glichen. Mithilfe von CSS und Medienabfragen k?nnen Designer diese Schriftattribute dynamisch ?ndern, um die Lesbarkeit und ?sthetik zu verbessern und sicherzustellen, dass der Text auf jedem Ger?t, vom Desktop-Monitor bis zum Mobiltelefon, optimal aussieht. Da eine einzige variable Schriftart mehrere station?re Schriftartdateien ersetzen kann, verringert sich die Notwendigkeit, umfangreiche Schriftarten zu laden, und die Leistung der Website wird verbessert. Diese Flexibilit?t verbessert nicht nur das Benutzererlebnis, sondern rationalisiert auch den Designprozess. Ohne responsive Typografie – die mit verschiedenen Schriftarten ansprechender, effizienter und zug?nglicher wird – kann modernes Webdesign nicht existieren.

  Medienabfragen: Die Meister der Bildschirmgr??enanpassung

  Medienabfragen sind ein Eckpfeiler des responsiven Webdesigns und fungieren als Meister der Anpassung der Bildschirmgr??e. Basierend auf den Merkmalen des Ger?ts des Benutzers – wie Bildschirmbreite, -h?he, Aufl?sung und Ausrichtung – erm?glichen sie Designern die Anwendung bestimmter CSS-Stile. Mediensuchen helfen Designern dabei, sicherzustellen, dass eine Website auf einer Vielzahl von Ger?ten, von Laptops und Desktop-Monitoren bis hin zu Smartphones und Tablets, optimal aussieht und funktioniert.

  Die St?rke von Medienabfragen liegt in ihrer F?higkeit, flexible und flüssige Layouts zu erstellen, die für verschiedene Bildschirmgr??en geeignet sind. Mit Medienabfragen kann ein Designer Schriftgr??en ?ndern, Rasterlayouts ?ndern und sogar bestimmte Elemente basierend auf den Abmessungen des Ansichtsfensters ein- oder ausblenden. Dadurch wird sichergestellt, dass das Material seine ?sthetik und Zug?nglichkeit beh?lt, unabh?ngig vom verwendeten Ger?t.

  Medienabfragen definieren Haltepunkte – bestimmte Stellen, an denen sich das Layout an unterschiedliche Bildschirmgr??en anpasst. Diese Haltepunkte zielen auf verschiedene Ger?te ab und werden mithilfe von ?Min-Breite“, ?Max-Breite“ und anderen CSS-Merkmalen festgelegt. Beispielsweise k?nnte eine Medienabfrage die Verwendung eines mobilfreundlichen Layouts für Bildschirmbreiten von 768 Pixel oder weniger und eines anderen Layouts für gr??ere Displays angeben.

  Die Einbindung von Mediensuchen in das Webdesign verbessert die Zug?nglichkeit und das Benutzererlebnis. Auf allen Plattformen helfen Medienabfragen bei der Entwicklung inklusiver digitaler Erlebnisse, indem sie sicherstellen, dass Texte lesbar, die Navigation intuitiv und das Material gut organisiert sind. Jeder Webdesigner, der reaktionsf?hige, anpassungsf?hige und benutzerfreundliche Websites erstellen m?chte, muss im Zeitalter der vielf?ltigen Ger?tenutzung zun?chst Medienabfragen erlernen.

  Hier ist ein Beispiel:
  

  npm create vite@latest
  

  In diesem Beispiel haben wir Medienabfragen verwendet, um die Schriftartvariationseinstellungen und die St?rke unserer Schriftart basierend auf der Bildschirmgr??e anzupassen. Bei Ger?ten mit einer maximalen Breite von 600 Pixel wird die Schriftgr??e auf 3rem reduziert. Die Gewichtung und andere Variationen werden für :Hover-Effekte entsprechend angepasst. Bei Ger?ten mit einer Breite zwischen 601 Pixel und 1200 Pixel wird die Schriftgr??e auf 4rem eingestellt, mit angepasster Gewichtung und Variationen. Für Ger?te mit einer Breite von 1201 Pixel und mehr betr?gt die Schriftgr??e 5rem, wobei die ursprünglichen Einstellungen beibehalten werden.
  Diese Medienabfragen sorgen dafür, dass sich die Schriftart an unterschiedliche Bildschirmgr??en anpasst und so die Lesbarkeit und das Benutzererlebnis auf verschiedenen Ger?ten verbessert.

  

  Das Bild oben zeigt die Anzeige für kleine Bildschirme

  

  Das Bild oben zeigt die Anzeige für mittlere Bildschirme

  

  Das Bild oben zeigt die Anzeige für gro?e Bildschirme

  Ansichtsfenstereinheiten: Layouts flüssig gestalten

  Viewport-Einheiten sind ein leistungsstarkes Werkzeug im modernen Webdesign und erm?glichen die Erstellung flüssiger und reaktionsf?higer Layouts, die sich nahtlos an verschiedene Bildschirmgr??en anpassen. Zu den Ansichtsfenstereinheiten geh?ren vw (Ansichtsfensterbreite) und vh (Ansichtsfensterh?he), die relativ zu den Abmessungen des Ansichtsfensters des Browsers sind. Ein vw entspricht 1 % der Breite des Ansichtsfensters und ein vh entspricht 1 % der H?he des Ansichtsfensters. Mit diesen Einheiten k?nnen Designer sicherstellen, dass Elemente entsprechend der Gr??e des Bildschirms des Benutzers skaliert werden, wodurch ein dynamischeres und anpassungsf?higeres Design entsteht. Durch das Festlegen der Schriftgr??e, des Abstands oder der R?nder in Ansichtsfenstereinheiten k?nnen Sie beispielsweise die Gr??e von Text und Objekten automatisch anpassen und so ein einheitliches Erscheinungsbild auf mehreren Ger?ten gew?hrleisten. Diese Anpassungsf?higkeit verbessert das Benutzererlebnis, indem sie sicherstellt, dass Inhalte lesbar und ?sthetisch ansprechend bleiben, unabh?ngig davon, ob die Website auf einem gro?en Desktop-Monitor oder einem kleinen mobilen Bildschirm angezeigt wird. Mit Viewport-Einheiten k?nnen Designer anpassungsf?hige Layouts erstellen, die sich leicht an das sich st?ndig ?ndernde Terrain digitaler Ger?te anpassen lassen.

  Hier ist ein Beispiel für die Verwendung von vw zum Anpassen der Schriftgr??e basierend auf der Breite des Ansichtsfensters:
  

  npm create vite@latest
  

  In diesem Beispiel wird aus dem obigen Code die Eigenschaft ?font-size“ von .variable-font mithilfe von vw-Einheiten für die Breite des Ansichtsfensters festgelegt, sodass die Textgr??e auf die Breite des Ansichtsfensters reagiert.

  Wir k?nnen Mediensuchen und Ansichtsfenstereinheiten mit unterschiedlichen Schrifteigenschaften kombinieren, um wirklich responsive Typografie zu erstellen, die sich elegant an jedes Ger?t oder jede Bildschirmgr??e anpasst. Dies erm?glicht es uns, ein herausragendes Benutzererlebnis zu bieten, unabh?ngig davon, welche Zugriffsmethode jemand für unsere Website w?hlt.

  Erweiterte typografische Effekte mit variablen Schriftarten

  Variable Schriftarten erm?glichen es Designern, ?u?erst individuelle und dynamische Textstile zu erstellen, indem sie ein neues Feld komplexer typografischer Effekte er?ffnen. Designer k?nnen jetzt nahtlose überg?nge und ungew?hnliche visuelle Effekte erzeugen, die bisher mit station?ren Schriftarten schwierig waren, indem sie Eigenschaften wie St?rke, Breite und benutzerdefinierte Achsen kontinuierlich anpassen. Die St?rke, der Kontrast und die Mittellinie k?nnen durch Anpassen der Schriftart dynamisch ge?ndert werden, was eine komplexe Kontrolle über das Aussehen des Textes erm?glicht. Diese Anpassungsf?higkeit ist im responsiven Design sehr ausgepr?gt, bei dem sich Schriftarten problemlos an verschiedene Bildschirmgr??en und -ausrichtungen anpassen lassen. Darüber hinaus erm?glichen interaktive Animationen, dass Text auf Benutzeraktionen wie Bewegen oder Klicken reagiert, was zu faszinierenden und immersiven Begegnungen führt. Viewport-Einheiten sorgen in Kombination mit unterschiedlichen Schrifteigenschaften dafür, dass die Typografie flüssig und skalierbar bleibt und verbessern so die Lesbarkeit und das Erscheinungsbild auf allen Arten von Ger?ten. Mithilfe dieser hochentwickelten Funktionen k?nnen Designer visuell eindrucksvolles digitales Material erstellen und dabei die M?glichkeiten der konventionellen Typografie erweitern. Lassen Sie uns einige faszinierende Methoden erkunden, um die Grenzen der Online-Typografie zu erweitern:

  Flüssige Typografie

  Flüssige Typografie ist eine Designmethode, bei der Text dynamisch mit der Gr??e des Ansichtsfensters skaliert wird und so auf vielen Ger?ten ein reibungsloses und reaktionsschnelles Leseerlebnis bietet. Ansichtsfenstereinheiten, Mediensuchen und ver?nderbare Schriftarten sorgen durch flüssige Typografie dafür, dass der Text unabh?ngig von der Bildschirmgr??e verst?ndlich und visuell ausgewogen bleibt. Diese Methode macht feste Schriftgr??en überflüssig und erm?glicht nahtlose ?nderungen, wodurch die Lesbarkeit und das Erscheinungsbild auf eine Weise verbessert werden, die zu sehr unterschiedlichen Anzeigebedingungen passt.

  Hier ist ein Beispiel:
  

  npm run dev
  

  Wie es funktioniert:

  calc() Funktion: Diese Funktion erzeugt einen flie?enden Skalierungseffekt durch die Kombination relativer Einheiten vw mit festen Werten rem. Schriftgr??e, zum Beispiel, calc(2rem 2vw) reagiert auf die Breite des Ansichtsfensters und stellt eine Basisgr??e sicher.

  Flüssige Typografie für verschiedene Elemente: Viele Elemente wie h1, h2 und p garantieren, dass der Text mithilfe flüssiger Typografie ger?teübergreifend geeignet skaliert wird. Die Funktion calc() stellt eine Basisgr??e mit einem Skalierungsfaktor bereit, der sich mit der Breite des Ansichtsfensters ?ndert.

  Variable Schriftarten: Durch die Kombination flüssiger Typografie mit ver?nderbaren Schriftarten k?nnen Sie dynamische ?nderungen der Textattribute je nach Gr??e des Ansichtsfensters erzielen.
  Diese Methode garantiert, dass der Text auf einem breiten Spektrum von Ger?ten und Bildschirmgr??en ?sthetisch ansprechend und lesbar bleibt.

  Durch die Animation von Text verleiht die kinetische Typografie ihm Leben und erzeugt interessante und dynamische visuelle Effekte, die den Betrachter begeistern. Diese Methode fügt Bewegung und Interaktion hinzu, indem Textattribute mithilfe von JavaScript- und CSS-Animationen ge?ndert werden. Mithilfe eines :hover-Effekts zur Animierung der Schriftst?rke in unserem Beispiel mit der variablen Schriftart haben wir kinetische Typografie demonstriert, d. h. nahtlos von leichteren zu kr?ftigeren Schriftst?rken. Dies hebt nicht nur den Inhalt hervor, sondern zeigt auch, wie unterschiedliche Schriftarten durch flie?ende ?nderungen in Echtzeit die Benutzerinteraktionen verbessern k?nnen. Kinetische Typografie erm?glicht es Designern, die visuelle Attraktivit?t und Benutzerfreundlichkeit ihres Textes zu verbessern und so seine grundlegende Rolle in einer interaktiven und interessanten digitalen Umgebung zu st?rken.

  Beispiel: Gewicht beim Schweben animieren

  npm create vite@latest
  

  Hier verwenden wir einen sanften übergang, um die St?rke des .variable-font-Elements bei :hover von normal 100 auf fett 1000 zu animieren, wodurch ein subtiler, aber wirkungsvoller Effekt entsteht.

  Dies sind nur einige der fantasievollen M?glichkeiten, die verschiedene Schriftarten bieten. Von dynamischen Animationen bis hin zu flie?enden Layouts gibt es zahlreiche M?glichkeiten für unverwechselbare und faszinierende Schriftarten. Mit ein wenig Erfindungsreichtum und CSS-Verst?ndnis k?nnen wir Webdesign-Normen in Frage stellen und bemerkenswerte Benutzererlebnisse schaffen.

  Abschluss

  Variable Schriftarten – am besten demonstriert von Kyiv Sans – verwandeln die Typografie im Web, indem sie mehrere Schriftarten in einer einzigen Datei gruppieren. Durch die Verringerung der Anzahl von HTTP-Abfragen vereinfacht diese Erfindung Prozesse, erh?ht die Designflexibilit?t und steigert die Leistung. Designer k?nnen ver?nderbare Schriftarten in CSS vollst?ndig nutzen, um reaktionsf?hige, dynamische Schriftarten zu erstellen, die perfekt zu verschiedenen Bildschirmgr??en und Benutzerinteraktionen passen.
  Designer k?nnen visuell ansprechende und leicht zug?ngliche typografische Erlebnisse schaffen, indem sie Attribute wie Gewicht, Mittelschichteffekte und Kontrast sowie reaktionsf?hige Ans?tze wie Medienabfragen und Ansichtsfenstereinheiten verwenden. Variable Schriftarten sind ein notwendiges Werkzeug für zeitgen?ssisches Webdesign, da ihre Flie?f?higkeit neue Wege für den künstlerischen Ausdruck erm?glicht.

  Ressourcen

  • Sehen Sie sich die auf Netlify gehostete Live-Vorschau an
  • Quellcode anzeigen

  Referenzen

  • Variable Schriftarten
  • OpenType
  • Kyiv Sans
  • Ansichtsfenster
  • Schriftart
  • registrierte Achsen
  • Benutzerdefinierte Achsen
  • @font-face
  • Typ Netzwerk
  • Schrift Eichh?rnchen
  • Adobe-Schriftarten?
  • Font Spring
  • Google-Schriftarten
  • Vfonts.com
  • ttf
  • woff2
  • everythingfonts.com
  • Behance.net
  • Medienanfragen
  • px
  • rem
  • vw
  • vh
  • calc()

  Das obige ist der detaillierte Inhalt vonVariable Schriftarten für dynamische Typografie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!