字體相關的CSS屬性

Articles

CSS 簡介

字體相關的CSS屬性

本文解釋了與字體相關的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)

如果您想使用與瀏覽器或裝置無關的固定大小，可以使用像像素或點這樣的絕對單位指定字體大小。

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

px: 像素是最常見的單位。以像素為增量指定大小。

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

pt: 點是印刷中常用的單位。1點等於1/72英寸。

相對值(em, rem, %)

您還可以基於父元素或根元素的字體大小指定相對字體大小。這適合用於響應式設計。

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使字體大小比父元素的更小。

常用範例

在響應式設計中，通常使用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是一個調整文字視覺重要性和可讀性的關鍵屬性。根據設計目的或為了靈活的響應式設計，適當使用單位和關鍵字非常重要。

`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: 襯線字體（例如，Times New Roman、Georgia）
  - sans-serif: 無襯線字體（例如，Arial、Verdana）
  - monospace: 等寬字體（例如，Courier New、Lucida Console）
  - cursive: 草書字體（例如，Comic Sans MS）
  - 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 屬性，用於指定字元的樣式，特別是應用斜體或正常樣式。該屬性常用於文本的強調和設計，特別是在標題和引文中。

字體樣式的主要值

`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 可能會通過人工方式將文字傾斜。

`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 類使用十六進制顏色代碼指定顏色。
- 可以通過例如 #F00 這樣的3位數指定顏色。在此情況下，#F00 與 #FF0000 的顏色相同。
color-rgb 類使用 RGB 格式指定顏色。
- RGB：在 0 到 255 的範圍內指定紅、綠、藍成分。
color-rgba 類使用 RGBA 格式來增加透明度。
color-hsl 類使用 HSL 格式指定顏色。
- 可以通過色相、飽和度和亮度來指定顏色。色相的範圍為 0 到 360 度，飽和度和亮度的範圍為 0% 到 100%。
color-hsla 類使用 HSLA 格式來增加透明度。

您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。請也查看我們的 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 屬性

字體樣式的主要值

normal

italic

oblique

oblique <angle>

font-style 的使用

總結

color 屬性

說明：

YouTube Video

`font-size` 屬性

`font-family` 屬性

如何指定 `font-family`

`font-weight` 屬性

`font-weight` 的主要值

如何使用 `font-weight` 的示例

`font-style` 屬性

`normal`

`italic`

`oblique`

`oblique <angle>`

`font-style` 的使用

`color` 屬性