3.13 文字樣式
font-size 文字大小
單位介紹：
px：固定單位
em 與 %：相對單位，相較於父元素
rem：相對單位，相較於
<html>根元素
html：
<!doctype html>
<html>
<head>
</head>
<body>
<div class="text1">
文字1
<div class="text2">文字2</div>
</div>
</body>
</html>css：
範例：
若將 em 單位用在其它 css 屬性，例如圓角(border-radius)，那就是直接看該元素的文字大小。
例：
font-weight 文字粗體
文字粗體，值有 100、200、300、400(normal)、500、600、700(bold)、800、900。並不是設定就有效，甚至其實看不太出來，常用的只有 normal 及 bold。其它要看字體本身有沒有支援。
範例：
font-style 字體樣式
可選的值有：normal 和 italic。
normal 是預設狀態，即一般字體；italic 會呈現斜體。
範例：
text-decoration 文字畫線
可選的值有：
underline：下方畫線。
overline：上方畫線。
line-through：刪除線。
none：沒有任何的線。
其它用法：
另外可以設定線的粗細、類型、顏色。
如果是
underline的時候，可以設定text-underline-offset來指定拉開的距離。
text-transform 英文字大小寫
這主要是用在英文字母才會有效。可選的值有：
capitalize：每個英文單字首字母強制大寫。
uppercase：全部英文字都變大寫。
lowercase：全部英文字都變小寫。
none：不做任何變化。這是預設值。
text-align 文字水平對齊
可選的值有：
left：預設值，置左。
right：置右。
center：置中。
justify：區塊的兩側文字對齊。
text-indent 首行縮排
預設值為 0。可設定首行縮排，例：
line-height 文字行高
指定倍數或固定單位，建議用倍數觀念來指定。
white-space 關於空格
該如何處理元素內的空白字元。
常用的有以下：
normal：預設值，連續的空白字元會被合併(collapse)。
nowrap：強制不會換行。
pre：連續的空白字元(包含斷行)都會被保留。(註：在 code pen 上實測此屬性值不太正確，因為沒有保留空白字元。)
word-break 文字斷行
中文字比較沒有這個問題，英文字就會有問題，常見可設定的有：
normal：這是預設。
break-all：以字母來斷行。
當文字內容是網址的時候，可能會遇到超出去的問題，例：
color 文字顏色
關鍵字
16進位
rgba 或 rgb
r：red (0 ~ 255)
g：green (0 ~ 255)
b：blue (0 ~ 255)
a：alpha 不透明度，0 ~ 1 的小數，1 為完全不透明，0 為完全透明。
hsla 或 hsl
h：Hue 色相。0 ~ 360
s：Saturation 飽合度。0% ~ 100%，一個顏色若飽合度愈高，愈接近純色；一個顏色若飽合度低，就愈接近灰色。
l：Lightness 亮度。0% ~ 100%，一個顏色若沒有亮度，就會是黑色；一個顏色若亮度最高，就是白色。
a：Alpha 不透明度。0 ~ 1 的小數，1 為完全不透明，0 為完全透明。
範例：
font-family 指定字體
全站通用
一般是直接針對 body 標籤來設定：
以上述為例，瀏覽器會優先用「微軟正黑體」，如果電腦沒有這個字體，就繼續往後找，下一個是「BiauKai」(標楷體)，如果有，就使用這個字體。依此類推。
情況：英文字套用 helvetica，中文字套用 BiauKai：
有些字體例如 BiauKai 這個字體中英文都有；然而 helvetica 只有英文字體。那以此情況為例的話，英文字就會套用 helvetica 字體，中文就會套用 BiauKai 字體。
針對特定元素
如果需要特別針對某元素，那就直接針對該元素去指定字體即可：
襯線體、無襯線體
@font-face 字體檔自行載入
網頁上的字體檔副檔名，儘可能使用 woff 或 woff2 字體，較輕量，WOFF 說明文件參考。
透過 CSS 的 @font-face ，就可以使用自己的字體檔：
語法示意：
font-display 決定字體載入方式
可設定的有以下，記 swap 即可：
auto：由瀏覽器自行決定，通常會與 block 相同。
block：在字型未載入完全時，會有一部份的時間會由佔位空間留白，等到字型快載入完成時，出現預設字型，字型載入完成時，再一次替換。
swap：(結論用這個)。先出現預設的字型，然後字型邊下載邊替換。
fallback：先顯示預設字型，當字型載入完畢後，再一次替換，但如果下載時間過長的話(3秒為限)，就不會替換。
optional：會依照使用者的網路狀況，當網路速度太慢時，則直接使用預設的字型為主。
故 @font-face 裡以後都寫類似這樣：
其它資源
例：請在 practice 資料夾下，建立 font.html 檔案，貼以下的程式：
Last updated