Properti CSS Terkait Font

Articles

Artikel ini menjelaskan properti CSS yang terkait dengan font.

Anda dapat mempelajari tentang penggunaannya dan cara menulis properti seperti font-style dan font-family.

YouTube Video

Membuat HTML untuk pratinjau

css-font.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-font.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Font-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Typography (Font-Related)</h2>
 20        </header>
 21        <article>
 22            <h3>font-size</h3>
 23            <section>
 24                <h4>Absolute Values</h4>
 25                <header><h4>font-size: 16px</h4></header>
 26                <section class="sample-view">
 27                    <p class="font-size-px">Font size: 16px</p>
 28                </section>
 29                <header><h4>font-size: 12pt</h4></header>
 30                <section class="sample-view">
 31                    <p class="font-size-pt">Font size: 12pt</p>
 32                </section>
 33            </section>
 34            <section>
 35                <h4>Relative Values</h4>
 36                <header><h4>font-size: 1.2em</h4></header>
 37                <section class="sample-view">
 38                    <p class="font-size-em">Font size: 1.2em</p>
 39                </section>
 40                <header><h4>font-size: 1.5rem</h4></header>
 41                <section class="sample-view">
 42                    <p class="font-size-rem">Font size: 1.5rem</p>
 43                </section>
 44                <header><h4>font-size: 150%</h4></header>
 45                <section class="sample-view">
 46                    <p class="font-size-percent">Font size: 150%</p>
 47                </section>
 48            </section>
 49            <section>
 50                <h4>Keywords</h4>
 51                <header><h4>font-size: small</h4></header>
 52                <section class="sample-view">
 53                    <p class="font-size-small">Font size: small</p>
 54                </section>
 55                <header><h4>font-size: medium%</h4></header>
 56                <section class="sample-view">
 57                    <p class="font-size-medium">Font size: medium (default)</p>
 58                </section>
 59                <header><h4>font-size: large</h4></header>
 60                <section class="sample-view">
 61                    <p class="font-size-large">Font size: large</p>
 62                </section>
 63                <header><h4>font-size: x-large</h4></header>
 64                <section class="sample-view">
 65                    <p class="font-size-x-large">Font size: x-large</p>
 66                </section>
 67            </section>
 68            <section>
 69                <h4>Relative Keywords</h4>
 70                <header><h4>font-size: smaller</h4></header>
 71                <section class="sample-view">
 72                    <p class="font-size-smaller">Font size: smaller</p>
 73                </section>
 74                <header><h4>font-size: larger</h4></header>
 75                <section class="sample-view">
 76                    <p class="font-size-larger">Font size: larger</p>
 77                </section>
 78            </section>
 79        </article>
 80        <article>
 81            <h3>font-family</h3>
 82            <section>
 83                <h4>Specific Font Names</h4>
 84                <header><h4>font-family: Arial, sans-serif</h4></header>
 85                <section class="sample-view">
 86                    <p class="font-family-arial">Font Family Arial</p>
 87                </section>
 88                <header><h4>font-family: Verdana, sans-serif</h4></header>
 89                <section class="sample-view">
 90                    <p class="font-family-verdana">Font Family Verdana</p>
 91                </section>
 92                <header><h4>font-family: "Times New Roman", serif</h4></header>
 93                <section class="sample-view">
 94                    <p class="font-family-times">Font Family Times New Roman</p>
 95                </section>
 96                <header><h4>font-family: "Courier New", monospace</h4></header>
 97                <section class="sample-view">
 98                    <p class="font-family-courier">Font Family Courier New</p>
 99                </section>
100                <header><h4>font-family: Georgia, serif</h4></header>
101                <section class="sample-view">
102                    <p class="font-family-georgia">Font Family Georgia</p>
103                </section>
104            </section>
105            <section>
106                <h4>Generic Font Families</h4>
107                <header><h4>font-family: serif</h4></header>
108                <section class="sample-view">
109                    <p class="font-family-serif">Font Family Serif</p>
110                </section>
111                <header><h4>font-family: sans-serif</h4></header>
112                <section class="sample-view">
113                    <p class="font-family-sans-serif">Font Family Sans-Serif</p>
114                </section>
115                <header><h4>font-family: monospace</h4></header>
116                <section class="sample-view">
117                    <p class="font-family-monospace">Font Family Monospace</p>
118                </section>
119                <header><h4>font-family: cursive</h4></header>
120                <section class="sample-view">
121                    <p class="font-family-cursive">Font Family Cursive</p>
122                </section>
123                <header><h4>font-family: fantasy</h4></header>
124                <section class="sample-view">
125                    <p class="font-family-fantasy">Font Family Fantasy</p>
126                </section>
127            </section>
128        </article>
129        <article>
130            <h3>font-weight</h3>
131            <section>
132                <h4>Keyword Values</h4>
133                <header><h4>font-weight: normal</h4></header>
134                <section class="sample-view">
135                    <p class="font-weight-normal">Font weight: normal</p>
136                </section>
137                <header><h4>font-weight: bold</h4></header>
138                <section class="sample-view">
139                    <p class="font-weight-bold">Font weight: bold</p>
140                </section>
141                <header><h4>font-weight: bolder</h4></header>
142                <section class="sample-view">
143                    <p class="font-weight-bolder">Font weight: bolder</p>
144                </section>
145                <header><h4>font-weight: lighter</h4></header>
146                <section class="sample-view">
147                    <p class="font-weight-lighter">Font weight: lighter</p>
148                </section>
149            </section>
150            <section>
151                <h4>Numeric Values</h4>
152                <header><h4>font-weight: 100</h4></header>
153                <section class="sample-view">
154                    <p class="font-weight-100">Font weight: 100 (Thin)</p>
155                </section>
156                <header><h4>font-weight: 200</h4></header>
157                <section class="sample-view">
158                    <p class="font-weight-200">Font weight: 200 (Extra Light)</p>
159                </section>
160                <header><h4>font-weight: 300</h4></header>
161                <section class="sample-view">
162                    <p class="font-weight-300">Font weight: 300 (Light)</p>
163                </section>
164                <header><h4>font-weight: 400</h4></header>
165                <section class="sample-view">
166                    <p class="font-weight-400">Font weight: 400 (Normal)</p>
167                </section>
168                <header><h4>font-weight: 500</h4></header>
169                <section class="sample-view">
170                    <p class="font-weight-500">Font weight: 500 (Medium)</p>
171                </section>
172                <header><h4>font-weight: 600</h4></header>
173                <section class="sample-view">
174                    <p class="font-weight-600">Font weight: 600 (Semi Bold)</p>
175                </section>
176                <header><h4>font-weight: 700</h4></header>
177                <section class="sample-view">
178                    <p class="font-weight-700">Font weight: 700 (Bold)</p>
179                </section>
180                <header><h4>font-weight: 800</h4></header>
181                <section class="sample-view">
182                    <p class="font-weight-800">Font weight: 800 (Extra Bold)</p>
183                </section>
184                <header><h4>font-weight: 900</h4></header>
185                <section class="sample-view">
186                    <p class="font-weight-900">Font weight: 900 (Black)</p>
187                </section>
188            </section>
189        </article>
190        <article>
191            <h3>font-style</h3>
192            <section>
193                <h4>Keyword Values</h4>
194                <header><h4>font-style: normal</h4></header>
195                <section class="sample-view">
196                    <p class="font-style-normal">This is normal font style.</p>
197                </section>
198                <header><h4>font-style: italic</h4></header>
199                <section class="sample-view">
200                    <p class="font-style-italic">This is italic font style.</p>
201                </section>
202                <header><h4>font-style: oblique</h4></header>
203                <section class="sample-view">
204                    <p class="font-style-oblique">This is oblique font style.</p>
205                </section>
206                <header><h4>font-style: oblique 20deg</h4></header>
207                <section class="sample-view">
208                    <p class="font-style-oblique-20deg">This is an oblique font style with a 20-degree angle.</p>
209                </section>
210            </section>
211        </article>
212        <article>
213            <h3>color</h3>
214            <section>
215                <h4>Color Property Examples</h4>
216                <header><h4>color: red</h4></header>
217                <section class="sample-view">
218                    <p class="color-red">This text is red using a keyword.</p>
219                </section>
220                <header><h4>color: #FF5733</h4></header>
221                <section class="sample-view">
222                    <p class="color-hex">This text is displayed with a hex color code (#FF5733).</p>
223                </section>
224                <header><h4>color: rgb(255, 87, 51)</h4></header>
225                <section class="sample-view">
226                    <p class="color-rgb">This text is displayed using RGB (rgb(255, 87, 51)).</p>
227                </section>
228                <header><h4>color: rgba(255, 87, 51, 0.7)</h4></header>
229                <section class="sample-view">
230                    <p class="color-rgba">This text is displayed using RGBA with transparency (rgba(255, 87, 51, 0.7)).</p>
231                </section>
232                <header><h4>color: hsl(14, 100%, 60%)</h4></header>
233                <section class="sample-view">
234                    <p class="color-hsl">This text is displayed using HSL (hsl(14, 100%, 60%)).</p>
235                </section>
236                <header><h4>color: hsla(14, 100%, 60%, 0.7)</h4></header>
237                <section class="sample-view">
238                    <p class="color-hsla">This text is displayed using HSLA with transparency (hsla(14, 100%, 60%, 0.7)).</p>
239                </section>
240            </section>
241        </article>
242    </main>
243</body>
244</html>

Tipografi (Terkait Font)

Properti `font-size`

 1/* Absolute Values */
 2.font-size-px {
 3    font-size: 16px;
 4}
 5
 6.font-size-pt {
 7    font-size: 12pt;
 8}
 9
10/* Relative Values */
11.font-size-em {
12    font-size: 1.2em; /* 120% of the parent font size */
13}
14
15.font-size-rem {
16    font-size: 1.5rem; /* 150% of the root element's font size */
17}
18
19.font-size-percent {
20    font-size: 150%; /* 150% of the parent font size */
21}
22
23/* Keywords */
24.font-size-medium {
25    font-size: small;
26}
27
28.font-size-medium {
29    font-size: medium;
30}
31
32.font-size-large {
33    font-size: large;
34}
35
36.font-size-x-large {
37    font-size: x-large;
38}
39
40/* Relative Keywords */
41.font-size-larger {
42    font-size: larger;
43}
44
45.font-size-smaller {
46    font-size: smaller;
47}

font-size adalah properti CSS yang digunakan untuk menentukan ukuran teks dalam elemen. Ini digunakan untuk menyesuaikan pentingnya teks secara visual dan meningkatkan keterbacaan. font-size dapat ditentukan menggunakan berbagai unit dan metode.

Cara utama untuk menentukan nilai

Nilai absolut(px, pt)

Jika Anda ingin menggunakan ukuran tetap yang tidak tergantung pada browser atau perangkat, tentukan ukuran font dalam unit absolut seperti piksel atau poin.

1p {
2    font-size: 16px;
3}

px: Piksel adalah unit yang paling umum. Tentukan ukuran dalam kelipatan 1 piksel.

1p {
2    font-size: 12pt;
3}

pt: Poin adalah unit yang umum digunakan dalam percetakan. 1 poin sama dengan 1/72 inci.

Nilai relatif(em, rem, %)

Anda juga dapat menentukan ukuran font relatif berdasarkan ukuran font elemen induk atau elemen root. Ini cocok untuk desain responsif.

1p {
2    font-size: 1.2em; /* 120% of the parent element's font size */
3}

em: em adalah unit relatif yang didasarkan pada ukuran font elemen induk. Jika ukuran font elemen induk adalah 16px, maka 1em sama dengan 16px.

1p {
2    font-size: 1.5rem; /* 150% of the root element's font size */
3}

rem: rem adalah unit relatif yang didasarkan pada ukuran font elemen root (biasanya elemen <html>).

1p {
2    font-size: 150%; /* 150% of the parent element's font size */
3}

%: % ditentukan sebagai persentase relatif terhadap ukuran font elemen induk.

Kata kunci

Anda juga dapat menggunakan kata kunci untuk dengan mudah menentukan ukuran yang ramah pengguna.

 1p.xx-small {
 2    font-size: xx-small;
 3}
 4p.x-small {
 5    font-size: x-small;
 6}
 7p.small {
 8    font-size: small;
 9}
10p.medium {
11    font-size: medium;
12}
13p.large {
14    font-size: large;
15}
16p.x-large {
17    font-size: x-large;
18}
19p.xx-large {
20    font-size: xx-large;
21}

xx-small, x-small, small, medium, large, x-large, xx-large: Kata kunci ini mendefinisikan ukuran font dasar yang bervariasi tergantung pada browser tetapi mudah digunakan.

Kata kunci relatif

Anda dapat menentukan ukuran font relatif menggunakan kata kunci terkait dengan elemen induk atau ukuran teks di sekitarnya.

1p {
2    font-size: larger;
3}

larger: larger membuat ukuran font lebih besar dibandingkan dengan elemen induk.

1p {
2    font-size: smaller;
3}

smaller: smaller membuat ukuran font lebih kecil dibandingkan dengan elemen induk.

Contoh penggunaan umum

Dalam desain responsif, em dan rem sering digunakan untuk menentukan ukuran font yang fleksibel berdasarkan ukuran elemen induk atau elemen root.
Dalam desain tetap atau desain presisi, biasanya menggunakan px untuk menetapkan ukuran.

Contoh penyesuaian ukuran font

 1h1 {
 2    font-size: 2.5rem; /* 2.5 times the size of the root element's font size */
 3}
 4
 5p {
 6    font-size: 16px; /* Fixed size */
 7}
 8
 9.small-text {
10    font-size: smaller; /* Smaller than the parent element's size */
11}

Kesimpulan

font-size adalah properti penting untuk menyesuaikan pentingnya teks secara visual dan keterbacaannya. Penting untuk menggunakan unit dan kata kunci dengan tepat sesuai dengan tujuan desain atau untuk desain responsif yang fleksibel.

Properti `font-family`

 1/* Specific Font Names */
 2.font-family-arial {
 3    font-family: Arial, sans-serif;
 4}
 5
 6.font-family-verdana {
 7    font-family: Verdana, sans-serif;
 8}
 9
10.font-family-times {
11    font-family: "Times New Roman", serif;
12}
13
14.font-family-courier {
15    font-family: "Courier New", monospace;
16}
17
18.font-family-georgia {
19    font-family: Georgia, serif;
20}
21
22/* Generic Font Families */
23.font-family-serif {
24    font-family: serif;
25}
26
27.font-family-sans-serif {
28    font-family: sans-serif;
29}
30
31.font-family-monospace {
32    font-family: monospace;
33}
34
35.font-family-cursive {
36    font-family: cursive;
37}
38
39.font-family-fantasy {
40    font-family: fantasy;
41}

Properti font-family terutama dapat menentukan dua jenis nilai berikut:.

Nama font spesifik: Tentukan nama font tertentu. Tentukan font yang terinstal pada sistem atau tersedia sebagai font web.
- Contoh:
  - Arial
  - Verdana
  - Times New Roman
  - Courier New
  - Georgia
Keluarga font generik: Tentukan grup font cadangan yang digunakan jika font tertentu tidak tersedia.
- Contoh:
  - serif: Serif (mis., Times New Roman, Georgia)
  - sans-serif: Sans-serif (mis., Arial, Verdana)
  - monospace: Monospace (mis., Courier New, Lucida Console)
  - cursive: Cursive (mis., Comic Sans MS)
  - fantasy: Fantasy (mis., Papyrus, Impact)

Cara Menentukan `font-family`

Saat menentukan beberapa font, disarankan untuk memisahkan nama font dengan koma dan mencantumkan font generik sebagai cadangan di akhir.

1p {
2    font-family: "Times New Roman", Georgia, serif;
3}

Dalam kasus ini, jika Times New Roman tidak tersedia, maka Georgia akan digunakan, dan jika keduanya tidak tersedia, font serif akan digunakan.

Properti `font-weight`

 1/* Keyword Values */
 2.font-weight-normal {
 3    font-weight: normal; /* Standard thickness (usually 400) */
 4}
 5
 6.font-weight-bold {
 7    font-weight: bold; /* Bold (usually 700) */
 8}
 9
10.font-weight-bolder {
11    font-weight: bolder; /* Bolder than the parent element */
12}
13
14.font-weight-lighter {
15    font-weight: lighter; /* Lighter than the parent element */
16}
17
18/* Numeric Values */
19.font-weight-100 {
20    font-weight: 100; /* Thin (Thin) */
21}
22
23.font-weight-200 {
24    font-weight: 200; /* Extra Light */
25}
26
27.font-weight-300 {
28    font-weight: 300; /* Light */
29}
30
31.font-weight-400 {
32    font-weight: 400; /* Normal */
33}
34
35.font-weight-500 {
36    font-weight: 500; /* Medium */
37}
38
39.font-weight-600 {
40    font-weight: 600; /* Semi Bold */
41}
42
43.font-weight-700 {
44    font-weight: 700; /* Bold */
45}
46
47.font-weight-800 {
48    font-weight: 800; /* Extra Bold */
49}
50
51.font-weight-900 {
52    font-weight: 900; /* Black */
53}

font-weight adalah properti CSS yang digunakan untuk menentukan ketebalan teks. Ini memainkan peran penting dalam penekanan visual dan gaya teks serta digunakan untuk mengubah gaya font. font-weight dapat ditentukan menggunakan angka atau kata kunci untuk menunjukkan rentang ketebalan dari tipis hingga tebal.

Nilai Utama dari `font-weight`

Kata kunci

1p {
2    font-weight: normal; /* Default thickness */
3}

normal mewakili berat font standar. Biasanya sesuai dengan 400.

1p {
2    font-weight: bold; /* Bold */
3}

bold mewakili teks tebal. Biasanya sesuai dengan 700.

1p {
2    font-weight: bolder; /* Bolder than the parent element's font-weight */
3}

bolder mewakili teks yang lebih tebal daripada elemen induknya.

1p {
2    font-weight: lighter; /* Lighter than the parent element's font-weight */
3}

lighter mewakili teks yang lebih ringan daripada elemen induknya.

Nilai Numerik

1p {
2    font-weight: 300; /* Light text */
3}
4
5h1 {
6    font-weight: 700; /* Bold text */
7}

font-weight juga dapat ditentukan sebagai angka, antara 100 hingga 900. Angka yang lebih kecil menghasilkan teks yang lebih tipis, dan angka yang lebih besar menghasilkan teks yang lebih tebal. Biasanya, keluarga font mendukung rentang ketebalan tertentu, tetapi tidak semua angka tersedia untuk semua font.

100: Tipis
200: Sangat Ringan
300: Ringan
400: Normal
500: Sedang
600: Semi Tebal
700: Tebal
800: Sangat Tebal
900: Hitam

Contoh Cara Menggunakan `font-weight`

 1h1 {
 2    font-weight: 900; /* Black (Extra Bold) */
 3}
 4
 5p.normal {
 6    font-weight: normal; /* Standard thickness */
 7}
 8
 9p.bold {
10    font-weight: bold; /* Bold */
11}
12
13p.lighter {
14    font-weight: lighter; /* Lighter than the parent element */
15}
16
17p.custom-weight {
18    font-weight: 500; /* Medium */
19}

Penggunaan Praktis

Teks standar biasanya menggunakan 400 (normal).
Untuk judul atau bagian yang ditekankan, biasanya digunakan 700 (bold).
Bergantung pada desain, tingkat ketebalan menengah seperti 500 atau 600 mungkin juga digunakan untuk menghindari penekanan berlebihan.

Ringkasan

font-weight adalah properti yang menentukan ketebalan teks, menggunakan kata kunci seperti normal atau bold, atau angka dari 100 hingga 900.
lighter dan bolder disesuaikan relatif terhadap ketebalan elemen induk.
Memilih font-weight yang sesuai berdasarkan desain dan keterbacaan adalah penting.

Properti `font-style`

 1/* Font style examples */
 2.font-style-normal {
 3    font-style: normal; /* Normal font style */
 4}
 5
 6.font-style-italic {
 7    font-style: italic; /* Italic */
 8}
 9
10.font-style-oblique {
11    font-style: oblique; /* Slanted text */
12}
13
14.font-style-oblique-20deg {
15    font-style: oblique 20deg; /* Slanted text with a 20-degree angle */
16}

font-style adalah properti CSS yang digunakan untuk menentukan gaya karakter, terutama untuk menerapkan gaya miring atau normal. Properti ini sering digunakan untuk penekanan teks dan desain, terutama pada judul dan kutipan.

Nilai Utama dari `font-style`

`normal`

1p {
2    font-style: normal;
3}

normal adalah gaya karakter standar (biasanya tegak lurus).

`italic`

1p {
2    font-style: italic;
3}

italic membuat teks menjadi miring. Gaya ini dapat diterapkan jika keluarga font mendukung gaya miring.

`oblique`

1p {
2    font-style: oblique;
3}

oblique membuat teks menjadi miring. Berbeda dengan italic, jika font tidak memiliki versi miring, ini mungkin membuat teks miring secara buatan.

`oblique <angle>`

1p {
2    font-style: oblique 20deg;
3}

Tentukan sudut dengan oblique untuk memiringkan teks sesuai sudut yang ditentukan. Spesifikasi ini untuk kustomisasi lebih lanjut dari oblique. Saat ini, sebagian besar browser tidak mendukung spesifikasi sudut, tetapi beberapa mendukungnya.

`penggunaan font-style`

italic sering digunakan untuk penekanan, kutipan, dan judul buku.
oblique sering digunakan jika font tidak menyertakan gaya italic, sebagai cara untuk memiringkan teks secara artifisial.
normal digunakan ketika kembali ke gaya teks normal.

Ringkasan

font-style digunakan untuk mengontrol kemiringan teks, dengan tiga nilai utama: normal, italic, dan oblique.
Dalam desain, italic sering digunakan untuk menekankan teks, dan jika font tidak mendukungnya, oblique dapat digunakan untuk memiringkan teks.

`properti color`

 1/* Color examples */
 2.color-red {
 3    color: red;
 4}
 5
 6.color-hex {
 7    color: #FF5733;
 8}
 9
10.color-rgb {
11    color: rgb(255, 87, 51);
12}
13
14.color-rgba {
15    color: rgba(255, 87, 51, 0.7);
16}
17
18.color-hsl {
19    color: hsl(14, 100%, 60%);
20}
21
22.color-hsla {
23    color: hsla(14, 100%, 60%, 0.7);
24}

Properti color adalah properti dasar dalam CSS untuk menentukan warna teks. Ini digunakan untuk mengubah warna teks elemen HTML dan dapat menentukan warna dalam berbagai format.

Penjelasan:

Kelas color-red menentukan warna teks sebagai merah menggunakan kata kunci.
- Anda dapat menentukan nama warna seperti red, blue, green yang didefinisikan dalam CSS.
Kelas color-hex menentukan warna menggunakan kode warna heksadesimal.
- Anda dapat menentukan dengan 3 digit seperti #F00. Dalam kasus ini, #F00 adalah warna yang sama dengan #FF0000.
Kelas color-rgb menentukan warna menggunakan format RGB.
- RGB: Menentukan komponen merah, hijau, dan biru dalam rentang dari 0 hingga 255.
Kelas color-rgba menggunakan format RGBA untuk menambahkan transparansi.
Kelas color-hsl menentukan warna menggunakan format HSL.
- Warna dapat ditentukan dengan hue, saturation, dan lightness. Hue ditentukan dari 0 hingga 360 derajat, dan saturation serta lightness ditentukan dari 0% hingga 100%.
Kelas color-hsla menggunakan format HSLA untuk menambahkan transparansi.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video

Aturan CSS `@`Properti CSS terkait teks

Properti CSS Terkait Font

YouTube Video

Membuat HTML untuk pratinjau

Tipografi (Terkait Font)

Properti font-size

Cara utama untuk menentukan nilai

Nilai absolut(px, pt)

Nilai relatif(em, rem, %)

Kata kunci

Kata kunci relatif

Contoh penggunaan umum

Contoh penyesuaian ukuran font

Kesimpulan

Properti font-family

Cara Menentukan font-family

Properti font-weight

Nilai Utama dari font-weight

Kata kunci

Nilai Numerik

Contoh Cara Menggunakan font-weight

Penggunaan Praktis

Ringkasan

Properti font-style

Nilai Utama dari font-style

normal

italic

oblique

oblique <angle>

penggunaan font-style

Ringkasan

properti color

Penjelasan:

YouTube Video

Properti `font-size`

Properti `font-family`

Cara Menentukan `font-family`

Properti `font-weight`

Nilai Utama dari `font-weight`

Contoh Cara Menggunakan `font-weight`

Properti `font-style`

Nilai Utama dari `font-style`

`normal`

`italic`

`oblique`

`oblique <angle>`

`penggunaan font-style`

`properti color`