Huruf (font) italic merupakan bentuk huruf yang memiliki nilai kemiringan huruf ke arah kanan yang biasanya sebesar 12°. Huruf italic sebenarnya adalah huruf regular (normal) namun dibuat sehingga memiliki bentuk huruf dengan gaya miring oleh CSS. Huruf italic biasanya digunakan sebagai penanda bahwa teks tersebut memiliki nilai lebih dan dianggap penting.
Sering dijumpai huruf (font) yang dibuat oleh desainernya, memiliki jenis yang sama namun juga mempunyai varian font yang berbeda-beda. Misalnya jenis font Cousine dari keluarga serif memiliki beberapa varian seperti Cousine-Regular, Cousine-Bold, Cousine-Italic dan lainnya. Versi font normalnya adalah Cousine-Regular sedangkan versi dalam bentuk italic-nya adalah Cousine-Italic. Keduanya dibuat oleh desainernya dengan versi dan bentuk yang berbeda.
Melalui penataan gaya pada CSS, font tersebut dapat dibuat dalam bentuk miring. Jenis font regular dan jenis font italic yang sudah dimiringkan oleh pengguna akan memiliki hasil dengan tingkat kemiringan yang berbeda.
Properti font-style merupakan properti pada CSS yang digunakan untuk merubah huruf regular (normal) menjadi dalam bentuk huruf miring (italic). Properti ini memiliki beberapa nilai yang dapat digunakan untuk membuat bentuk font (huruf) menjadi miring.
Penulisan properti font-style :
font-style: normal | italic | oblique | inherit;
Nilai normal merupakan nilai untuk membuat huruf menjadi dalam bentuk default (normal) dan tidak memiliki bentuk miring. Nilai italic akan membuat font (huruf) dimiringkan dengan tingkat kemiringan tertentu. Nilai oblique merupakan nilai tiruan dari italic dengan kemiringan yang nyaris sama dengan italic. Nilai inherit digunakan untuk mendapatkan style yang sama dengan nilai gaya pada elemen induknya.
Sebagai contoh misalnya :
font-style: italic;
font-style: oblique;
font-style: normal;
Untuk dapat membedakan secara fisik dan visual perbedaan antara font dengan gaya italic dan oblique, jawabannya adalah tidak bisa dibedakan. Keduanya memiliki bentuk dan sudut kemiringan yang sama. Untuk font regular, keduanya memiliki sudut kemiringan 12° (nilai aktualnya 12.15°). Pada jenis font italic bawaan dari desainernya, jika font tersebut dimiringkan maka keduanya juga memiliki sudut kemiringan yang sama yaitu 23.5°
Berikut contoh menggunakan efek dan gaya huruf miring dengan beberapa nilai di dalamnya :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
<title>Font Style CSS</title>
<style>
@font-face {
font-family: 'Cousine-Regular';
src: url('fonts/Cousine-Regular.ttf');
}
@font-face {
font-family: 'Cousine-Italic';
src: url('fonts/Cousine-Italic.ttf');
}
.div_a p{
font-family: Cousine-Regular,sans-serif;
padding:5px;
margin:10px;
border:solid 1px magenta;
}
.div_b p{
font-family: Cousine-Italic,sans-serif;
padding:5px;
margin:10px;
border:solid 1px magenta;
}
</style>
</head>
<body>
<h3>Font Jenis Cousine-Regular</h3>
<div class="div_a">
<p style="font-style:normal;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ante at sem hendrerit consectetur <b>(normal)</b>.</p>
<p style="font-style:italic;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ante at sem hendrerit consectetur <b>(italic)</b>.</p>
<p style="font-style:oblique;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ante at sem hendrerit consectetur <b>(oblique)</b>.</p>
</div>
<h3>Font Jenis Cousine-Italic</h3>
<div class="div_b">
<p style="font-style:normal;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ante at sem hendrerit consectetur <b>(normal)</b>.</p>
<p style="font-style:italic;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ante at sem hendrerit consectetur <b>(italic)</b>.</p>
<p style="font-style:oblique;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ante at sem hendrerit consectetur <b>(oblique)</b>.</p>
</div>
</body>
</html>
Tutorial CSS
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
Previous Page
