Rumah > hujung hadapan web > tutorial css > Sifat manakah yang digunakan untuk menjadikan fon condong?

Sifat manakah yang digunakan untuk menjadikan fon condong?

WBOY
Lepaskan: 2023-08-30 14:25:12
ke hadapan
1440 orang telah melayarinya

Sifat manakah yang digunakan untuk menjadikan fon condong?

Dalam CSS, kita boleh menggunakan atribut 'gaya fon' untuk menetapkan gaya fon. Kita boleh menggunakan gaya yang berbeza sebagai nilai sifat gaya fon, "serong" adalah salah satu daripadanya.

Pada asasnya, fon "serong" ialah versi teks yang ceroboh di mana kami menetapkan sudut untuk mengurangkan atau meningkatkan kecerunan teks. Di sini kita akan menjadikan fon condong dalam setiap contoh.

tatabahasa

Pengguna boleh menggunakan sifat gaya fon CSS untuk membuat fon condong mengikut sintaks berikut.

font-style: oblique;
Salin selepas log masuk

Contoh 1

Dalam contoh di bawah, kami telah mencipta dua teg

dan menambah teks padanya untuk dipaparkan pada halaman web. Selain itu, kami menggunakan sifat CSS "gaya fon: biasa" pada teg

pertama dan sifat CSS "gaya fon: oblique" pada teg

kedua.

Dalam output, uesrs dapat melihat bahawa fon condong lebih ceroboh daripada fon biasa.

<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>
Salin selepas log masuk

Contoh 2 (Sudut dengan sifat Oblique, hanya untuk pelayar Firefox)

Dalam contoh di bawah, kami turut menambah sudut menggunakan atribut gaya fon "serong". Hadnya ialah sudut ini hanya berfungsi dalam pelayar Firefox.

Kami mencipta tiga elemen div berbeza dan menambahkan teks padanya. Dalam CSS, kami menggunakan sifat serong gaya fon pada semua fon pada sudut yang berbeza. Dalam output, pengguna boleh melihat bahawa apabila sudut meningkat, cerun fon meningkat.

<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>
Salin selepas log masuk

Contoh 3

Dalam contoh di bawah, kami telah mencipta elemen div dan menambah beberapa elemen div bersarang pada pelbagai peringkat. Kami menggunakan sifat CSS 'gaya fon: oblique' untuk div induk dan pengguna boleh melihat bahawa semua fon div itu adalah serong, termasuk elemen div anak.

<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>
Salin selepas log masuk

Pengguna belajar menggunakan atribut gaya fon untuk mencipta fon condong. Ia hampir serupa dengan gaya fon "italic" kerana ia juga mencipta fon kursif atau kursif.

Atas ialah kandungan terperinci Sifat manakah yang digunakan untuk menjadikan fon condong?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:tutorialspoint.com
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan