Responsive Fonts in CSS erstellen
- Verwenden Sie den Viewport-Wert, um responsive Schriftarten in CSS zu erstellen
- Verwenden Sie Media Queries, um responsive Schriftarten in CSS zu erstellen
-
Verwendung von die Funktion
calc()zur Erstellung von Responsive Fonts in CSS -
Verwenden Sie die Funktion
clamp(), um Responsive Fonts in CSS zu erstellen
Der Artikel erklärt die Möglichkeiten, responsive Schriftarten nur mit CSS zu implementieren. Wir werden verschiedene Möglichkeiten vorstellen, wie modernes CSS und CSS3 die Schriftarten auf Geräten unterschiedlicher Bildschirmgröße lesbar machen.
Verwenden Sie den Viewport-Wert, um responsive Schriftarten in CSS zu erstellen
Eine der einfachsten Möglichkeiten, Schriftarten reaktionsfähig zu machen, besteht darin, die Schriftarten entsprechend der Größe des Ansichtsfensters oder der Fenstergröße des Browsers zu ändern. Es gibt verschiedene Viewport-Einheiten in Bezug auf die Achsen des Browserfensters, die von CSS bereitgestellt werden und bei der Erstellung responsiver Webseiten sehr nützlich sind. Einige Ansichtsfenster-Einheiten sind vw, vh, vmin und vmax. Wir können die Informationen dieser Einheiten von den CSS-Einheiten erhalten. Wir können diese Darstellungsfenstereinheiten anstelle von em, px oder pt verwenden, um die responsiven Schriftarten zu erstellen.
Erstellen Sie beispielsweise jedes der Tags h1, h2 und p. Schreiben Sie einen Text Ihrer Wahl zwischen diese Tags. Setzen Sie in CSS die Eigenschaft font-size der Tags h1, h2 und p auf 5.9vw, 3.0vh bzw. 2vmin.
Wenn wir die Größe des Browsers ändern, ändert sich der Viewport des Browsers und die Schriftgröße der Texte ändert sich entsprechend. Auf diese Weise können wir die Viewport-Einheiten in der Schriftgröße verwenden, um eine responsive Schriftart in CSS zu erstellen.
Beispielcode:
<h1> Hey boy </h1>
<h2> Hey girl </h2>
<p> Hey kid </p>
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
Verwenden Sie Media Queries, um responsive Schriftarten in CSS zu erstellen
Wir können die Medienabfragen verwenden, um responsive Schriftarten in CSS zu erstellen. Wir können auch Media Queries verwenden, um die Schriftgröße bei einer bestimmten Höhe/Breite des Geräts zu ändern. Wir verwenden das Schlüsselwort @media, um die Medienanfrage zu schreiben.
Setzen Sie beispielsweise die Eigenschaft font-size auf 3em. Als nächstes schreiben Sie die Medienabfrage mit der Bedingung max-width:320px. Setzen Sie dann die Eigenschaft font-size auf 2em.
Beispielcode:
body{
font-size: 3em;
}
@media only screen and (max-width: 320px) {
body {
font-size: 2em;
}
}
<h1> Hey boy </h1>
<h2> Hey girl </h2>
<p> Hey kid </p>
Hier wird die Schriftgröße reduziert, wenn der obige Code implementiert wird und auf Geräten mit einer Bildschirmgröße von weniger als 320px ausgeführt wird. Bei Geräten mit einer Höhe unter 320px wird die Schriftart auf 2em gesetzt. Und die Schriftarten werden auf 3em für Geräte mit einer Bildschirmgröße von mehr als 320px angezeigt.
Der Nachteil dieser Methode besteht darin, dass wir möglicherweise weitere Medienabfragen hinzufügen müssen, wenn das Design Geräte mit einer bestimmten Größe einbricht.
Verwendung von die Funktion calc() zur Erstellung von Responsive Fonts in CSS
Da die meisten modernen Browser heutzutage die Methode calc() in CSS unterstützen, erleichtert dies das Schreiben von responsivem Code. Darüber hinaus ist diese Methode auch effektiver und erreicht die Aufgabe, ohne den Code unordentlich zu machen. Wir können die Funktion calc() verwenden, um die Schriftgröße responsiv zu machen. Das Ergebnis der Funktion ist der Wert der Eigenschaft.
Setzen Sie beispielsweise die Eigenschaft font-size des Tags body auf die Funktion calc(). Schreiben Sie in die Funktion 0.75em + 1vw.
Beispielcode:
body {
font-size: calc(0.75em + 1vw);
}
<h1> Hey boy </h1>
<h2> Hey girl </h2>
<p> Hey kid </p>
Die Schriftgröße variiert, wenn sich der Wert von 1vw auf Geräten mit unterschiedlichen Bildschirmgrößen ändert. So können wir eine responsive Schriftart in CSS erstellen.
Verwenden Sie die Funktion clamp(), um Responsive Fonts in CSS zu erstellen
Die Funktion clamp() klemmt die Werte zwischen den Maximal- und Minimalwerten. Die Funktion nimmt drei Parameter als Argument entgegen, der erste ist der minimale Wert, der zweite der bevorzugte Wert und der letzte der maximal zulässige Wert. Wir können die Funktion clamp() verwenden, um jede Eigenschaft wie length, angle, percentage, number usw. festzulegen. Wir können die Funktion verwenden, um die responsive Schriftart in CSS zu erstellen.
Beispielcode:
h1{
font-size : clamp(2rem, 10vw, 5rem);
}
<h1> Hey boy </h1>
<h2> Hey girl </h2>
<p> Hey kid </p>
Im obigen Beispiel ist der Wert 2rem die minimal zulässige Schriftgröße. Ebenso ist der nächste Wert 10vw die Standardschriftgröße und der letzte 5rem die maximal zulässige Schriftgröße. Hier müssen wir beachten, dass der Wert in der Mitte relativ sein sollte wie in vw, ch oder vh und nicht absolut wie px und pt.
