คุณสมบัติ CSS ที่เกี่ยวข้องกับฟอนต์

Articles

บทความนี้อธิบายเกี่ยวกับคุณสมบัติ CSS ที่เกี่ยวข้องกับฟอนต์

คุณสามารถเรียนรู้กรณีการใช้งานและวิธีการเขียนคุณสมบัติต่างๆ เช่น font-style และ font-family

YouTube Video

สร้าง HTML สำหรับการพรีวิว

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>

การออกแบบตัวอักษร (ที่เกี่ยวข้องกับฟอนต์)

คุณสมบัติ `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 เป็นคุณสมบัติ CSS ที่ใช้ระบุขนาดของข้อความภายในองค์ประกอบ ใช้ปรับความสำคัญของข้อความในเชิงภาพและปรับปรุงความสามารถในการอ่าน font-size สามารถระบุได้โดยใช้หน่วยและวิธีการหลายรูปแบบ

วิธีหลักในการระบุค่า

ค่าคงที่(px, pt)

หากคุณต้องการใช้ขนาดคงที่ที่ไม่ขึ้นอยู่กับเบราว์เซอร์หรืออุปกรณ์ ให้ระบุขนาดฟอนต์ในหน่วยสัมบูรณ์ เช่น pixels หรือ points

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

px: Pixels เป็นหน่วยที่พบบ่อยที่สุด ระบุขนาดเป็นหน่วยเพิ่มขึ้นทีละ 1 pixel

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

pt: Points เป็นหน่วยที่ใช้ทั่วไปในงานพิมพ์ 1 point เท่ากับ 1/72 นิ้ว

ค่าที่สัมพันธ์กัน(em, rem, %)

คุณยังสามารถระบุขนาดฟอนต์แบบอิงสัมพัทธ์จากขนาดฟอนต์ขององค์ประกอบแม่หรือองค์ประกอบราก สิ่งนี้เหมาะสำหรับการออกแบบ responsive

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

em: em เป็นหน่วยสัมพัทธ์ที่อิงจากขนาดฟอนต์ขององค์ประกอบแม่ หาก font-size ขององค์ประกอบแม่คือ 16px จะทำให้ 1em เท่ากับ 16px

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

rem: rem เป็นหน่วยสัมพัทธ์ที่อิงจากขนาดฟอนต์ขององค์ประกอบราก (ปกติคือองค์ประกอบ <html>)

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

%: % ระบุเป็นเปอร์เซ็นต์อิงจากขนาดฟอนต์ขององค์ประกอบแม่

คีย์เวิร์ด

คุณสามารถใช้คีย์เวิร์ดเพื่อระบุขนาดที่เป็นมิตรกับผู้ใช้งานได้อย่างง่ายดาย

 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: คีย์เวิร์ดเหล่านี้กำหนดขนาดฟอนต์พื้นฐานที่แตกต่างกันไปตามเบราว์เซอร์แต่ใช้งานได้ง่าย

คีย์เวิร์ดเชิงสัมพัทธ์

คุณสามารถระบุขนาดฟอนต์แบบสัมพัทธ์โดยใช้คีย์เวิร์ดที่สัมพันธ์กับองค์ประกอบแม่หรือขนาดข้อความโดยรอบ

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

larger: larger ทำให้ขนาดฟอนต์ใหญ่กว่าขององค์ประกอบแม่

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

smaller: smaller ทำให้ขนาดฟอนต์เล็กกว่าขององค์ประกอบแม่

ตัวอย่างการใช้งานทั่วไป

ในงานออกแบบ responsive em และ rem มักใช้ระบุขนาดฟอนต์ที่ยืดหยุ่นตามขนาดขององค์ประกอบแม่หรือองค์ประกอบราก
ใน การออกแบบแบบคงที่ หรือการออกแบบที่ต้องการความแม่นยำ มักใช้ px เพื่อกำหนดขนาด

ตัวอย่างการปรับขนาดตัวอักษร

 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}

สรุป

font-size เป็นคุณสมบัติสำคัญสำหรับการปรับความสำคัญในเชิงภาพและความสามารถในการอ่านของข้อความ การใช้งานหน่วยและคีย์เวิร์ดอย่างเหมาะสมตามวัตถุประสงค์ของการออกแบบหรือการออกแบบ responsive ที่ยืดหยุ่นนั้นเป็นสิ่งสำคัญ

สมบัติ `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}

สมบัติ font-family สามารถระบุประเภทของค่าหลัก ๆ สองประเภทดังต่อไปนี้:

ชื่อฟอนต์เฉพาะ: กำหนดชื่อของฟอนต์เฉพาะ กำหนดฟอนต์ที่ติดตั้งในระบบหรือที่มีให้ใช้งานเป็นฟอนต์บนเว็บ
- ตัวอย่าง:
  - Arial
  - Verdana
  - Times New Roman
  - Courier New
  - Georgia
กลุ่มฟอนต์ทั่วไป: กำหนดกลุ่มฟอนต์สำรองที่สามารถใช้งานเมื่อฟอนต์เฉพาะใช้งานไม่ได้
- ตัวอย่าง:
  - serif: Serif (เช่น Times New Roman, Georgia)
  - sans-serif: Sans-serif (เช่น Arial, Verdana)
  - monospace: Monospace (เช่น Courier New, Lucida Console)
  - cursive: Cursive (เช่น Comic Sans MS)
  - fantasy: Fantasy (เช่น Papyrus, Impact)

วิธีการระบุ `font-family`

เมื่อกำหนดฟอนต์หลายรายการ แนะนำให้ใช้เครื่องหมายลูกน้ำในการแยกชื่อฟอนต์ และระบุฟอนต์ทั่วไปเป็นฟอนต์สำรองในลำดับท้าย

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

ในกรณีนี้ หาก Times New Roman ใช้งานไม่ได้ จะใช้ Georgia และหากทั้งสองใช้งานไม่ได้ จะใช้ฟอนต์ประเภท serif

สมบัติ `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 เป็นคุณสมบัติของ CSS ที่ใช้กำหนดความหนาของข้อความ มีบทบาทสำคัญในการเน้นรูปแบบและสไตล์ของข้อความ และใช้เพื่อเปลี่ยนสไตล์ฟอนต์ font-weight สามารถกำหนดได้ด้วยตัวเลขหรือคำคีย์เวิร์ดเพื่อระบุระดับความหนาตั้งแต่บางถึงหนา

ค่าหลักของ `font-weight`

คีย์เวิร์ด

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

normal หมายถึงน้ำหนักตัวอักษรปกติ โดยทั่วไปจะสอดคล้องกับค่า 400

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

bold หมายถึงข้อความที่เป็นตัวหนา โดยทั่วไปจะสอดคล้องกับค่า 700

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

bolder หมายถึงข้อความที่หนากว่าขององค์ประกอบแม่

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

lighter หมายถึงข้อความที่บางกว่าขององค์ประกอบแม่

ค่าตัวเลข

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

font-weight สามารถกำหนดด้วยตัวเลขตั้งแต่ 100 ถึง 900 ได้เช่นกัน ตัวเลขที่น้อยกว่าจะทำให้ข้อความบางลง ในขณะที่ตัวเลขที่มากกว่าจะทำให้ข้อความหนาขึ้น โดยปกติ ฟอนต์บางประเภทจะรองรับระดับความหนาที่เฉพาะเจาะจง แต่ไม่ได้รองรับทุกตัวเลขสำหรับฟอนต์ทุกตัว

100: บาง
200: บางมาก
300: เบา
400: ปกติ
500: กลาง
600: กึ่งหนา
700: หนา
800: หนามาก
900: ดำ

ตัวอย่างการใช้ `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}

การใช้งานจริง

ข้อความปกติ มักใช้ค่า 400 (normal)
สำหรับ หัวข้อหรือส่วนที่ต้องการการเน้นย้ำ มักจะใช้ค่า 700 (bold)
ขึ้นอยู่กับ การออกแบบ ความหนากลางอย่าง 500 หรือ 600 อาจถูกนำมาใช้เพื่อหลีกเลี่ยงการเน้นย้ำที่มากเกินไป

สรุป

font-weight เป็นคุณสมบัติที่ระบุความหนาของข้อความ ซึ่งใช้คีย์เวิร์ด เช่น normal หรือ bold หรือใช้ตัวเลขตั้งแต่ 100 ถึง 900
lighter และ bolder จะปรับตามค่าความหนาขององค์ประกอบแม่
การเลือกค่า font-weight ที่เหมาะสมตามการออกแบบและความสามารถในการอ่านเป็นสิ่งสำคัญ

คุณสมบัติ `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 เป็นคุณสมบัติ CSS ที่ใช้กำหนดสไตล์ของตัวอักษร โดยเฉพาะการปรับใช้รูปแบบเอียงหรือปกติ คุณสมบัตินี้มักใช้เพื่อเน้นข้อความและการออกแบบ โดยเฉพาะในหัวข้อและคำคม

ค่าหลักของ `font-style`

`normal`

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

normal คือรูปแบบตัวอักษรมาตรฐาน (โดยปกติเป็นตัวอักษรตรง)

`italic`

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

italic ทำให้ข้อความเป็นตัวเอียง (ลาดซ้าย) สไตล์นี้สามารถใช้ได้หากฟอนต์ที่กำหนดรองรับตัวเอียง

`oblique`

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

oblique ทำให้ข้อความเป็นตัวเอียง ต่างจาก italic หากฟอนต์ไม่มีเวอร์ชันตัวเอียง อาจทำการเอียงข้อความแบบจำลอง

`oblique <angle>`

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

กำหนดมุมด้วย oblique เพื่อทำให้ข้อความเอียงตามมุมที่กำหนด ข้อกำหนดนี้ใช้สำหรับการปรับแต่ง oblique เพิ่มเติม ในปัจจุบัน เบราว์เซอร์ส่วนใหญ่ยังไม่รองรับการกำหนดมุม แต่บางเบราว์เซอร์รองรับ

การใช้ `font-style`

italic มักใช้สำหรับการเน้นข้อความ คำพูด และชื่อหนังสือ
oblique มักใช้เมื่อฟอนต์ไม่มีรูปแบบตัวเอียง เพื่อทำให้ข้อความเอียงโดยวิธีการเทียม
normal ใช้เมื่อต้องการกลับไปยังรูปแบบข้อความปกติ

สรุป

font-style ใช้สำหรับควบคุมการเอียงของข้อความ โดยมีค่าหลักสามค่า ได้แก่ normal, italic และ oblique
ในการออกแบบ ตัวเอียงมักใช้เพื่อเน้นข้อความ และหากฟอนต์ไม่รองรับ สามารถใช้ oblique เพื่อทำให้ข้อความเอียงได้

คุณสมบัติ `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}

คุณสมบัติ color เป็นคุณสมบัติพื้นฐานใน CSS สำหรับกำหนดสีของข้อความ ใช้สำหรับเปลี่ยนสีข้อความขององค์ประกอบ HTML และสามารถกำหนดสีในรูปแบบต่างๆ ได้

คำอธิบาย:

คลาส color-red กำหนดสีข้อความเป็นสีแดงโดยใช้คำคีย์เวิร์ด
- คุณสามารถกำหนดชื่อสี เช่น red, blue, green ซึ่งกำหนดไว้ใน CSS
คลาส color-hex กำหนดสีโดยใช้รหัสสีแบบฐานสิบหก (hexadecimal)
- คุณสามารถกำหนดด้วยตัวเลข 3 หลัก เช่น #F00 ในกรณีนี้ #F00 คือสีเดียวกับ #FF0000
คลาส color-rgb กำหนดสีโดยใช้รูปแบบ RGB
- RGB: กำหนดค่าประกอบของสีแดง สีเขียว และสีน้ำเงิน ในช่วงตั้งแต่ 0 ถึง 255
คลาส color-rgba ใช้รูปแบบ RGBA เพื่อเพิ่มความโปร่งใส
คลาส color-hsl กำหนดสีโดยใช้รูปแบบ HSL
- สามารถกำหนดสีโดยใช้ค่าเฉดสี (hue) ความอิ่มตัวของสี (saturation) และความสว่าง (lightness) ค่าเฉดสี (hue) กำหนดในช่วง 0 ถึง 360 องศา และค่าความอิ่มตัว (saturation) และความสว่าง (lightness) กำหนดในช่วง 0% ถึง 100%
คลาส color-hsla ใช้รูปแบบ HSLA เพื่อเพิ่มความโปร่งใส

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video

กฎ CSS `@`คุณสมบัติ CSS ที่เกี่ยวข้องกับข้อความ

คุณสมบัติ CSS ที่เกี่ยวข้องกับฟอนต์

YouTube Video

สร้าง HTML สำหรับการพรีวิว

การออกแบบตัวอักษร (ที่เกี่ยวข้องกับฟอนต์)

คุณสมบัติ font-size

วิธีหลักในการระบุค่า

ค่าคงที่(px, pt)

ค่าที่สัมพันธ์กัน(em, rem, %)

คีย์เวิร์ด

คีย์เวิร์ดเชิงสัมพัทธ์

ตัวอย่างการใช้งานทั่วไป

ตัวอย่างการปรับขนาดตัวอักษร

สรุป

สมบัติ font-family

วิธีการระบุ font-family

สมบัติ font-weight

ค่าหลักของ font-weight

คีย์เวิร์ด

ค่าตัวเลข

ตัวอย่างการใช้ font-weight

การใช้งานจริง

สรุป

คุณสมบัติ font-style

ค่าหลักของ font-style

normal

italic

oblique

oblique <angle>

การใช้ font-style

สรุป

คุณสมบัติ color

คำอธิบาย:

YouTube Video

คุณสมบัติ `font-size`

สมบัติ `font-family`

วิธีการระบุ `font-family`

สมบัติ `font-weight`

ค่าหลักของ `font-weight`

ตัวอย่างการใช้ `font-weight`

คุณสมบัติ `font-style`

ค่าหลักของ `font-style`

`normal`

`italic`

`oblique`

`oblique <angle>`

การใช้ `font-style`

คุณสมบัติ `color`