Heim >Web-Frontend >CSS-Tutorial >Wie verwende ich die Eigenschaft „font-optical-sizing' in CSS?
Wie verwende ich die Eigenschaft „font-optical-sizing' in CSS?
- PHPznach vorne
- 2023-08-27 20:49:021526Durchsuche
Bevor wir lernen, wie man die Eigenschaft „font-optical-sizing“ verwendet, müssen wir uns zunächst die Eigenschaft „font“ in CSS ansehen und erfahren, warum „font-optical-sizing“ als separate Eigenschaft benötigt wird.
Der Textstil auf einer Webseite wird durch die font-Eigenschaft in CSS gesteuert, die eine Abkürzung für viele andere Eigenschaften ist. Es kann verwendet werden, um Systemschriftarten auf Elemente anzuwenden oder andere Werte für andere CSS-Eigenschaften festzulegen.
Schrifteigenschaften
Diese Eigenschaft gilt für alle Elemente und ist vererbbar, was bedeutet, dass die Schriftart des untergeordneten Elements mit der Schriftart des übergeordneten Elements übereinstimmt, sofern nicht anders angegeben.
Die Eigenschaften, aus denen sich die Eigenschaften der Schriftkürzel zusammensetzen, sind wie folgt: -
Schriftfamilie – Gibt die Schriftfamilie an, die auf den Text angewendet wird. Sie können optional eine Liste von Familien mit Priorität von links nach rechts bereitstellen.
Schriftgröße − Wird zur Steuerung der Schrift- oder Textgröße verwendet.
Font Stretch − Mit dieser Eigenschaft können Sie Zeichenflächen festlegen, die schmaler oder breiter als normale Zeichen sein können.
Schriftstil − Dieses Attribut gibt an, ob die Schriftart als fetter, kursiver, unterstrichener oder durchgestrichener Text angezeigt werden soll
Font-Variante – Steuern Sie Schriftartvarianten und legen Sie unterschiedliche Werte für Ligaturen fest.
Font-weight – Diese Eigenschaft legt fest, wie fett der Text angezeigt wird.
Zeilenhöhe – Wird verwendet, um den Abstand zwischen Textzeilen festzulegen.
Alle diese Eigenschaften haben einen Anfangswert, unabhängig davon, ob sie als Teil der Schriftart-Kurzschrifteigenschaften oder einzeln verwendet werden. Bei den meisten ist der Anfangswert „Normal“, der Standardwert für die Schriftgröße ist „Mittel“ und der Standardwert für die Schriftfamilie hängt vom System des Benutzers ab.
Beispiel
Ein Beispiel für die Verwendung des Schriftartattributs zum Formatieren von Text finden Sie unten.
<!DOCTYPE html> <html lang="en"> <head> <title>Various font styles</title> </head> <body> <p style="font:caption">This text will be displayed as a caption.</p> <p style="font:icon">This text will be displayed as an icon.</p> <p style="font:menu">This text will be displayed as a menu.</p> <p style="font:message-box">This text will be displayed as message-box</p> <p style="font:small-caption">This text will be displayed as a smaller form of caption.</p> <p style="font:status-bar">This text will be displayed as status bar.</p> <p style="font: bold;">This will be bold</p> <p style="font-size: large;">This will have larger font size.</p> </body> </html>
Was ist die optische Schriftgröße?
CSS verfügt über eine Eigenschaft font-optical-sizing, die bestimmt, ob der generierte Text für verschiedene Bildschirmgrößen optimiert ist. Browser können die Umrisse von Schriftzeichen ändern, um sie in verschiedenen Größen besser lesbar zu machen.
Es wäre für uns ein großer Vorteil, wenn die Schriftart die optische Größenänderung der Schriftart unterstützen würde. Dadurch stellen wir sicher, dass sich der Text immer an den Bildschirm anpasst, den der Benutzer verwendet. Die meisten variablen Schriftfamilien unterstützen diese Eigenschaft. Die optische Größenänderung wird automatisch aktiviert, wenn eine Schriftart über eine optische Größenänderungsachse verfügt. Wir verwenden den opsz-Wert in den Schriftartvarianteneinstellungen, um die optische Größenänderungsachse darzustellen.
Bei Verwendung der optischen Skalierung erscheinen kleinere Schriftgrößen typischerweise mit dickeren Strichen und größeren Serifen, während größerer Text typischerweise feiner erscheint, mit mehr Kontrast zwischen dickeren und dünneren Strichen.
Bei der Angabe dieser Eigenschaft können die folgenden Werte verwendet werden -
None − Wir verwenden diesen Wert, wenn wir keinen optisch modifizierten Text benötigen.
Auto – Der Browser verwendet diesen Wert, wenn wir die Glyphenform entsprechend der Bildschirmgröße anpassen müssen.
Darüber hinaus können wir auch globale Werte (erben, initial und unset) als Wert dieses Attributs verwenden.
Standardmäßig ist der Anfangswert dieser Eigenschaft auto. Es gilt für alle Elemente und umfasst auch die Attribute ::first-letter und ::first-line. Es handelt sich um einen vererbbaren Wert und der vom Browser angegebene Wert wird als berechneter Wert verwendet. Es verfügt über diskrete Animationstypen.
Beispiel
Ein Beispiel für die Verwendung des Werts auto als Wert dieses Attributs ist unten dargestellt.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
padding: 3%;
font-weight: 700;
font-optical-sizing: auto;
}
</style>
</head>
<body>
<p>This text will be optically modified for all screen sizes.</p>
</body>
</html>
Beispiel
In diesem Beispiel wird Vererbung als Wert einer Eigenschaft verwendet, einer der drei globalen Eigenschaften, die wir in CSS verwenden können.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
padding: 3%;
font-weight: 700;
font-optical-sizing: inherit;
}
</style>
</head>
<body>
<p>This text will be optically modified for all screen sizes using inherit as its value.</p>
</body>
</html>
Fazit
Zusammenfassend lässt sich sagen, dass die Eigenschaft „font-optical-sizing“ in CSS eine großartige Möglichkeit ist, Text auf verschiedenen Geräten und Auflösungen besser aussehen zu lassen. Damit können Sie die Schriftgröße entsprechend der beabsichtigten Verwendung anpassen, was die Lesbarkeit verbessert und ein einheitlicheres Design auf verschiedenen Bildschirmen ermöglicht. Durch die Nutzung dieser Funktion können Designer sicherstellen, dass ihre Layouts unabhängig davon, auf welchem Gerät sie angezeigt werden, gut aussehen, ohne die Einstellungen für jede Bildschirmgröße manuell anpassen zu müssen.
Das obige ist der detaillierte Inhalt vonWie verwende ich die Eigenschaft „font-optical-sizing' in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!