# 第三週補充教材
# 字體
# 基本字體運用技巧
body {
/* Segoe UI 為微軟的預設英文字體 */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
'Microsoft JhengHei', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
1
2
3
4
5
2
3
4
5
font-family 分為兩個部分，一個是指定字體 family-name，另一種是泛用字 generic-family
# 泛用字
泛用字簡單來說，就是系統的明體、黑體、捲曲字等預設值，並不是指定特定的字體，而也可稱為 字體集、統稱字體、泛用字集、通用字體集 等
注意
並非所有瀏覽器及系統的預設泛用字是相同的
一般來說定義 font-family 時，會將泛用字放在 最後方，如：
body {
/*最後方的是 sans-serif(黑體)*/
font-family: 'Lucida Grande', Helvetica, Arial, Verdana, sans-serif;
}
1
2
3
4
2
3
4
# 指定字體
只要直接輸入字型名稱即可，但特別要注意的是如果字體名稱中有 空白，就必須用 '' 或 "" 將他括起來。
另外在 優先順序 上，放在前方的字體會先被套用，如果不能才會套用次要的字體，也可以利用這方式來套用不同的字體在中英文上。
如下方的範例，先 Segoe UI，其次是 微軟正黑體，最後再放 泛用字。
body {
font-family: 'Segoe UI', '微軟正黑體', sans-serif;
}
1
2
3
2
3
# Dark mode
語法上使用 prefers-color-scheme 來監測是亮色或暗色的主題，相對應的值也就是 dark 或 light
# 使用變數快速切換網頁的主題色
如果透過一個個的 @media 設定將會增加開發及管理的困難度，在開發時可以將暗色、亮色的佈景主題色彩以 CSS 變數 的方式作定義，避免直接將色彩寫入 CSS 元素上，接下來在 @media 中僅需要改變 CSS 的變數就能夠完整切換所有元件的主題色彩。
<div class="demo mode">
<p>本區塊會隨著暗色與亮色主題切換</p>
<p>您目前的是 <span class="text-mode"></span> 主題</p>
</div>
1
2
3
4
2
3
4
.mode {
/* 紫色 */
--theme-primary: #6222ee;
--theme-background: #eee;
}
.mode {
background-color: var(--theme-background);
color: var(--theme-primary);
}
.text-mode:after {
content: 'light';
}
/* 當主題色為深色時觸發 */
@media (prefers-color-scheme: dark) {
.mode {
--theme-primary: #bb85fc;
--theme-background: #111;
}
.text-mode:after {
content: 'dark';
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 行高計算概念
# 實戰中常見的解決方法
- body 中統一設定行高 1.5
- h1 ~ h6 標籤設定行高 1.2，視覺上可以較舒適
# 不好的做法
- 寫死高度，如
line-height: 54px - 過多的行高定義
# 主要內容與背景圖的差異
需分辨圖片為主要內容還是背景圖，如為背景圖，可將 background-image 寫於外層，如：
<header class="header">
...
</header>
1
2
3
2
3
.header {
background-image: url(./images/xxx.png);
}
1
2
3
2
3
# 圖片判斷
當圖片有下方條件時，應使用 background。
- 長寬比的切換，如：pc 版的長寬比為 2 : 1，mobile 版的長寬比為 1 : 2
- 圖片是否需要裁切，如：pc 版為圖片滿版，mobile 版只剩下中間部分