Sifat CSS Berkaitan Fon

Articles

Artikel ini menerangkan sifat CSS berkaitan font.

Anda boleh mempelajari tentang kes penggunaan dan cara untuk menulis sifat seperti font-style dan font-family.

YouTube Video

Mencipta HTML untuk pratonton

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 (Berkaitan Font)

Sifat `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 ialah sifat CSS yang digunakan untuk menentukan saiz teks dalam elemen. Ia digunakan untuk menyesuaikan kepentingan visual teks dan meningkatkan kebolehbacaan. font-size boleh ditentukan menggunakan pelbagai unit dan kaedah.

Cara utama untuk menetapkan nilai

Nilai Mutlak(px, pt)

Jika anda ingin menggunakan saiz tetap yang bebas daripada pelayar atau peranti, nyatakan saiz font dalam unit mutlak seperti piksel atau titik.

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

px: Piksel adalah unit yang paling biasa digunakan. Nyatakan saiz dalam tambahan 1 piksel.

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

pt: Titik adalah unit yang biasa digunakan dalam percetakan. 1 titik bersamaan dengan 1/72 inci.

Nilai Relatif(em, rem, %)

Anda juga boleh menentukan saiz font relatif berdasarkan saiz font elemen induk atau akar. Ini sesuai untuk reka bentuk responsif.

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

em: em adalah unit relatif berdasarkan saiz font elemen induk. Jika font-size induk adalah 16px, maka 1em bersamaan dengan 16px.

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

rem: rem ialah unit relatif berdasarkan saiz font elemen akar (biasanya elemen <html>).

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

%: % dinyatakan sebagai peratusan relatif kepada saiz font elemen induk.

Kata kunci

Anda juga boleh menggunakan kata kunci untuk menentukan saiz yang mesra pengguna dengan mudah.

 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 menentukan saiz font asas yang berbeza mengikut pelayar tetapi mudah digunakan.

Kata kunci relatif

Anda boleh menentukan saiz font relatif menggunakan kata kunci berkaitan dengan elemen induk atau saiz teks sekitar.

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

larger: larger menjadikan saiz font lebih besar daripada elemen induk.

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

smaller: smaller menjadikan saiz font lebih kecil daripada elemen induk.

Contoh penggunaan yang biasa

Dalam reka bentuk responsif, em dan rem sering digunakan untuk menentukan saiz font fleksibel berdasarkan saiz elemen induk atau akar.
Dalam reka bentuk tetap atau reka bentuk tepat, biasanya menggunakan px untuk menetapkan saiz.

Contoh penyesuaian saiz fon

 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 ialah sifat penting untuk menyesuaikan kepentingan visual dan kebolehbacaan teks. Adalah penting untuk menggunakan unit dan kata kunci dengan sesuai mengikut tujuan reka bentuk atau untuk reka bentuk responsif yang fleksibel.

Sifat `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}

Sifat font-family boleh secara utama menentukan dua jenis nilai berikut:.

Nama fon tertentu: Nyatakan nama fon tertentu. Nyatakan fon yang dipasang pada sistem atau tersedia sebagai fon web.
- Contoh:
  - Arial
  - Verdana
  - Times New Roman
  - Courier New
  - Georgia
Keluarga fon generik: Nyatakan kumpulan fon pengganti untuk digunakan apabila fon tertentu tidak tersedia.
- Contoh:
  - serif: Serif (contohnya, Times New Roman, Georgia)
  - sans-serif: Sans-serif (contohnya, Arial, Verdana)
  - monospace: Monospace (contohnya, Courier New, Lucida Console)
  - cursive: Cursive (contohnya, Comic Sans MS)
  - fantasy: Fantasi (contohnya, Papyrus, Impact)

Cara Menentukan `font-family`

Apabila menyatakan beberapa fon, disarankan untuk memisahkan nama fon dengan koma dan menyenaraikan fon generik sebagai pengganti di akhir.

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

Dalam kes ini, jika Times New Roman tidak tersedia, Georgia akan digunakan, dan jika kedua-duanya tidak tersedia, fon serif akan digunakan.

Sifat `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 ialah sifat CSS yang digunakan untuk menentukan ketebalan teks. Ia memainkan peranan penting dalam penekanan visual dan gaya teks serta digunakan untuk mengubah gaya fon. font-weight boleh ditentukan menggunakan nombor atau kata kunci untuk menunjukkan julat ketebalan daripada nipis ke tebal.

Nilai Utama `font-weight`

Kata kunci

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

normal mewakili berat fon standard. Ia biasanya bersamaan dengan 400.

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

bold mewakili teks tebal. Ia biasanya bersamaan dengan 700.

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

bolder mewakili teks yang lebih tebal daripada elemen ibu bapanya.

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

lighter mewakili teks yang lebih ringan daripada elemen ibu bapanya.

Nilai Berangka

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

font-weight juga boleh ditentukan sebagai nombor, dari 100 hingga 900. Nombor yang lebih kecil menghasilkan teks yang lebih nipis, dan nombor yang lebih besar menghasilkan teks yang lebih tebal. Biasanya, keluarga fon menyokong julat ketebalan tertentu, tetapi tidak semua nombor tersedia untuk semua fon.

100: Tipis
200: Amat Ringan
300: Ringan
400: Biasa
500: Sederhana
600: Separuh Tebal
700: Tebal
800: Amat 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 Praktikal

Teks standard biasanya menggunakan 400 (normal).
Untuk tajuk atau bahagian yang ditekankan, adalah biasa untuk menggunakan 700 (bold).
Bergantung pada reka bentuk, berat pertengahan seperti 500 atau 600 juga boleh digunakan untuk mengelakkan penekanan berlebihan.

Ringkasan

font-weight ialah sifat yang menentukan ketebalan teks, menggunakan kata kunci seperti normal atau bold, atau nombor daripada 100 hingga 900.
lighter dan bolder menyesuaikan secara relatif dengan ketebalan elemen induk.
Memilih font-weight yang sesuai berdasarkan reka bentuk dan kebolehbacaan adalah penting.

Sifat `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 ialah sifat CSS yang digunakan untuk menentukan gaya aksara, terutamanya untuk menerapkan gaya italic atau normal. Sifat ini sering digunakan untuk penekanan teks dan reka bentuk, terutamanya dalam tajuk dan petikan.

Nilai Utama `font-style`

`normal`

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

normal ialah gaya aksara standard (biasanya aksara tegak).

`italic`

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

italic menjadikan teks italic (condong). Gaya ini boleh digunakan jika keluarga fon menyokong italic.

`oblique`

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

oblique menjadikan teks condong. Tidak seperti italic, jika fon tidak mempunyai versi italic, ini mungkin menjadikan teks condong secara buatan.

`oblique <angle>`

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

Nyatakan sudut dengan oblique untuk menjadikan teks condong mengikut sudut yang ditentukan. Spesifikasi ini adalah untuk menyesuaikan oblique dengan lebih lanjut. Pada masa ini, kebanyakan pelayar tidak menyokong spesifikasi sudut, tetapi ada yang menyokong.

`font-style` penggunaan

italic sering digunakan untuk penegasan, petikan, dan tajuk buku.
oblique sering digunakan apabila fon tidak mempunyai gaya italic, sebagai cara untuk mencondongkan teks secara buatan.
normal digunakan apabila kembali kepada gaya teks biasa.

Ringkasan

font-style digunakan untuk mengawal kecondongan teks, dengan tiga nilai utama: normal, italic, dan oblique.
Dalam reka bentuk, italic sering digunakan untuk menekankan teks, dan jika fon tidak menyokongnya, oblique boleh digunakan untuk mencondongkan teks.

ciri `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}

Harta color adalah harta asas dalam CSS untuk menentukan warna teks. Ia digunakan untuk mengubah warna teks elemen HTML dan boleh menentukan warna dalam pelbagai format.

Penjelasan:

Kelas color-red menentukan warna teks sebagai merah menggunakan kata kunci.
- Anda boleh menentukan nama warna seperti red, blue, green yang telah ditakrifkan dalam CSS.
Kelas color-hex menentukan warna menggunakan kod warna heksadesimal.
- Anda boleh menentukan dengan 3 digit seperti #F00. Dalam kes ini, #F00 adalah warna yang sama dengan #FF0000.
Kelas color-rgb menentukan warna menggunakan format RGB.
- RGB: Menentukan komponen merah, hijau, dan biru dalam julat dari 0 hingga 255.
Kelas color-rgba menggunakan format RGBA untuk menambah kejelasan.
Kelas color-hsl menentukan warna menggunakan format HSL.
- Warna boleh ditentukan dengan rona, ketepuan, dan kecerahan. Rona ditentukan dari 0 hingga 360 darjah, dan ketepuan serta kecerahan ditentukan dari 0% hingga 100%.
Kelas color-hsla menggunakan format HSLA untuk menambah kejelasan.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video

Peraturan CSS `@`Hartanah CSS yang berkaitan dengan teks

Sifat CSS Berkaitan Fon

YouTube Video

Mencipta HTML untuk pratonton

Tipografi (Berkaitan Font)

Sifat font-size

Cara utama untuk menetapkan nilai

Nilai Mutlak(px, pt)

Nilai Relatif(em, rem, %)

Kata kunci

Kata kunci relatif

Contoh penggunaan yang biasa

Contoh penyesuaian saiz fon

Kesimpulan

Sifat font-family

Cara Menentukan font-family

Sifat font-weight

Nilai Utama font-weight

Kata kunci

Nilai Berangka

Contoh Cara Menggunakan font-weight

Penggunaan Praktikal

Ringkasan

Sifat font-style

Nilai Utama font-style

normal

italic

oblique

oblique <angle>

font-style penggunaan

Ringkasan

ciri color

Penjelasan:

YouTube Video

Sifat `font-size`

Sifat `font-family`

Cara Menentukan `font-family`

Sifat `font-weight`

Nilai Utama `font-weight`

Contoh Cara Menggunakan `font-weight`

Sifat `font-style`

Nilai Utama `font-style`

`normal`

`italic`

`oblique`

`oblique <angle>`

`font-style` penggunaan

ciri `color`