Heim > Web-Frontend > CSS-Tutorial > Welche Eigenschaft wird als Abkürzung für die Angabe vieler anderer Schriftarteigenschaften in CSS verwendet?

Welche Eigenschaft wird als Abkürzung für die Angabe vieler anderer Schriftarteigenschaften in CSS verwendet?

王林
Freigeben: 2023-09-15 11:25:02
nach vorne
1027 Leute haben es durchsucht

哪个属性用作简写来指定 CSS 中的许多其他字体属性?

Entwickler können die Schriftarten von Webseiten mithilfe verschiedener CSS-Eigenschaften anpassen. Beispielsweise wird die Eigenschaft „font-size“ verwendet, um die Schriftgröße anzugeben, und die CSS-Eigenschaft „font-weight“ wird verwendet, um die Schriftstärke des Textes anzugeben. Darüber hinaus können wir viele andere CSS-Eigenschaften verwenden, um die Schriftart anzupassen.

Die CSS-Eigenschaft „font“ kann als Abkürzung für alle Eigenschaften verwendet werden, um die Schriftart anzupassen.

Grammatik

Benutzer können die Kurzform-CSS-Eigenschaft „font“ verwenden, um die Schriftart einer Webseite gemäß der folgenden Syntax anzupassen.

font: font-style font-weight font-size/line-height font-family;
Nach dem Login kopieren

Wert

  • Schriftstil – Geben Sie den Schriftstil an, z. B. Kursivschrift, Unterstreichung usw.

  • font-weight – Geben Sie die Schriftstärke an. Es kann die Form Fett, Normal, Zahlen usw. annehmen.

  • font-size – wird verwendet, um die Schriftgröße anzugeben.

  • line-height – Gibt die Zeilenhöhe des Textes an.

  • font-family – Gibt die Schriftfamilie an.

Beispiel

Im folgenden Beispiel enthält das HTML-Element

Text, den wir mithilfe verschiedener CSS-Eigenschaften angepasst haben. Wir verwenden die CSS-Eigenschaft „font-size“, um die Schriftgröße anzugeben, die CSS-Eigenschaft „font-weight“, um die Schriftstärke anzugeben, „font-family“, um den Schriftarttyp anzugeben, und „font-style“, um die anzugeben Schriftgröße. Gibt den Schriftstil an und das Attribut „line-height“ gibt die Zeilenhöhe des Textes an.

In der Ausgabe können Benutzer angepasste Schriftarten beobachten.

<html>
<head>
   <style>
      .text {
         font-size: 13px;
         font-weight: bold;
         font-family: Arial;
         font-style: italic;
         line-height: 3.6;
         width: 100px;
      }
   </style>
</head>
<body>
   <h3> Using the different <i> font properties </i> to customize the fonts in CSS </h3>
   <p class = "text">
      This font is customized with various CSS properties.
   </p>
</body>
</html>
Nach dem Login kopieren

Beispiel

Im folgenden Beispiel verwenden wir eine einzige CSS-Eigenschaft „Schriftart“, um die Schriftart anzupassen, anstatt wie im obigen Beispiel fünf verschiedene Eigenschaften zu verwenden.

In der Ausgabe kann der Benutzer beobachten, dass der Schriftart derselbe Stil wie im ersten Beispiel verliehen wird.

<html>
<head>
   <style>
      .text {
         font: italic 800 1.2rem/2.5 Arial;
         width: 100px;
      }
   </style>
</head>
<body>
   <h2> Using the font CSS property to customize the fonts in CSS </h2>
   <p class = "text">
      This font is customized with the CSS 'font' property.
   </p>
</body>
</html>
Nach dem Login kopieren

Fazit

Benutzer haben gelernt, die verkürzte CSS-Eigenschaft „font“ zu verwenden, anstatt die Anzahl der CSS-Eigenschaften zum Anpassen von Schriftarten zu verwenden. Darüber hinaus empfiehlt es sich, Kurzform-CSS-Eigenschaften zu verwenden, um die Lesbarkeit zu verbessern und die Codekomplexität zu verringern.

Das obige ist der detaillierte Inhalt vonWelche Eigenschaft wird als Abkürzung für die Angabe vieler anderer Schriftarteigenschaften in CSS verwendet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:tutorialspoint.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage