Welche Eigenschaft wird verwendet, um die Schriftart kursiv zu machen?-CSS-Tutorial-php.cn

Welche Eigenschaft wird verwendet, um die Schriftart kursiv zu machen?

WBOY

Freigeben： 2023-08-30 14:25:12

nach vorne

1420 Leute haben es durchsucht

Welche Eigenschaft wird verwendet, um die Schriftart kursiv zu machen?

In CSS können wir das Attribut „font-style“ verwenden, um den Stil der Schriftart festzulegen. Wir können verschiedene Stile als Wert der Eigenschaft „font-style“ verwenden, „oblique“ ist einer davon.

Grundsätzlich ist eine „schräge“ Schriftart eine schlampige Textversion, bei der wir den Winkel so einstellen, dass die Neigung des Textes verringert oder erhöht wird. Hier machen wir die Schriftarten in jedem Beispiel kursiv.

Grammatik

Benutzer können die Eigenschaft „font-style“ von CSS verwenden, um die Schriftart gemäß der folgenden Syntax kursiv zu gestalten.

font-style: oblique;

Nach dem Login kopieren

Beispiel 1

Im folgenden Beispiel haben wir zwei

-Tags erstellt und ihnen Text hinzugefügt, der auf der Webseite angezeigt werden soll. Zusätzlich haben wir die CSS-Eigenschaft „font-style: normal“ auf das erste

-Tag und die CSS-Eigenschaft „font-style: oblique“ auf das zweite

-Tag angewendet.

In der Ausgabe können Benutzer feststellen, dass die kursive Schriftart schlampiger ist als die normale Schriftart.

<html>
<head>
   <style>
      .normal {
         font-style: normal;
         font-size: 1.5rem;
      }
      .oblique {
         font-style: oblique;
         font-size: 1.5rem;
      }
   </style>
</head>
<body>
   <h2>Using the <i> font-stlye: oblique </i> to make font oblique.</h2>
   <p class = "normal"> This font is Normal font. </p>
   <p class = "oblique"> This font is <i> oblique </i> font. </p>
</body>
</html>

Nach dem Login kopieren

Beispiel 2 (Winkel mit Oblique-Eigenschaft, nur für Firefox-Browser)

Im folgenden Beispiel haben wir mithilfe des Schriftstilattributs „oblique“ auch einen Winkel hinzugefügt. Die Einschränkung besteht darin, dass dieser Winkel nur im Firefox-Browser funktioniert.

Wir haben drei verschiedene div-Elemente erstellt und ihnen Text hinzugefügt. In CSS wenden wir die Eigenschaft „font-style oblique“ auf alle Schriftarten in unterschiedlichen Winkeln an. In der Ausgabe kann der Benutzer beobachten, dass mit zunehmendem Winkel die Neigung der Schriftart zunimmt.

<html>
<head>
   <style>
      .one {
         font-style: oblique 40deg;
         font-size: 1.5rem;
      }
      .two {
         font-style: oblique 80deg;
         font-size: 1.5rem;
      }
      .three {
         font-style: oblique 30deg;
         font-size: 1.5rem;
      }
   </style>
</head>
<body>
   <h2>Using the <i>font-stlye: oblique</i> to make font oblique.</h2>
   <p class = "one">The font style is oblique and slope is 40deg.</p>
   <p class = "two">The font style is oblique and slope is 80deg.</p>
   <p class = "three">The font style is oblique and slope is 120deg.</p>
</body>
</html>

Nach dem Login kopieren

Beispiel 3

Im folgenden Beispiel haben wir ein div-Element erstellt und einige verschachtelte div-Elemente auf mehreren Ebenen hinzugefügt. Wir haben die CSS-Eigenschaft „font-style: oblique“ für das übergeordnete Div verwendet und der Benutzer kann sehen, dass alle Schriftarten dieses Div schräg sind, einschließlich der untergeordneten Div-Elemente.

<html>
<head>
   <style>
      .test {
         font-style: oblique;
         font-size: 1.5rem;
      }
   </style>
</head>
<body>
   <h2>Using the <i>font-stlye: oblique</i> to make font oblique.</h2>
   <div class = "test">
      This is a parent div.
      <div>
         This is a child div with font-style: oblique.
         <div>
            This is another nested child div with font-style: oblique.
         </div>
      </div>
   </div>
   </div>
</body>
</html>

Nach dem Login kopieren

Benutzer haben gelernt, das Attribut „font-style“ zum Erstellen kursiver Schriftarten zu verwenden. Es ähnelt fast dem Schriftstil „Kursiv“, da es auch eine kursive oder kursive Schriftart erzeugt.

Das obige ist der detaillierte Inhalt vonWelche Eigenschaft wird verwendet, um die Schriftart kursiv zu machen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!