字體 font 系列

字體大小

• 屬性名：font-size
• 屬性值：數字 + 絕對單位 (px, cm 等) 或 相對單位 (%百分比, em, rem 等)
• Chrome 預設最小字體為 12px，預設大小為 16px
• 若將文字設為 0px 會自動消失 (不顯示)

範例：

p {
	font-size: 20px; /* 像素 pixel，最常用 */
	font-size: 20%;
	font-size: 20em;
}

字體粗細

• 屬性名：font-weight
• 屬性值：關鍵字 ( normal 正常, bold 加粗 ) 或 數字 ( 100, 200, 300, …..900 )

範例：

p {
	font-weight: normal; /* 正常 */
	font-weight: bold; /* 加粗 */
	font-weight: 100; /* 粗度 100, 注意不是所有字型都提供 9 種粗細, 有時會沒有變化 */
}

字體

• 屬性名：font-family
• 屬性值：可填入一個字體或字體系列，以 , 區隔，網頁會由左至右照順序查找，若找不到會顯示電腦預設字體
• 使用字體的英文名稱可以讓兼容性更好

範例：

p {
	font-family: "Gill Sans Extrabold", "sans-serif"; /* 多個字體 */
	font-family: "serif"; /* 只指定一個字體 */
}

字體樣式

• 屬性名：font-style
• 屬性值：normal (預設)、italic (斜體，斜體字體)、oblique (傾斜，強制傾斜)、inherit (繼承父元素設定)

範例：

p {
	font-style: normal;
    font-style: italic; /* 要字體本身有斜體 */
    font-style: oblique; /* 強制傾斜 */
}

字體樣式組

font 是一個文字的縮寫屬性，可以讓我們在 font 中同時設定文字樣式、字體大小、粗細等多種樣式

• 屬性名：font
• 屬性值：font 可設定的屬性有 font-style, font-variant, font-weight, font-size, line-height 和 font-family
• 其中 font-size 和 font-family 為必要屬性且順序固定，font-family 寫在最後；font-size 倒數第二
• 每個屬性間用空格隔開
• line-height 是指行高，因為不屬於 font 家族的成員，所以若要設定的話必須與 font-size 為一組，寫成 font-size / line-height 的形式

** 範例： **

p {
    font: 30px "STSong"; /* 一定要有 font-size 和 font-family */
    font: italic bold 20px "STSong"; /* 其他屬性沒有特別的順序 */
    font: italic bold 20px "STSong", "sans-serif"; /* 有多個字體時規則與原本一樣以 `,` 連接 */
    font: 30px/60px "STSong"; /* 行高不能單獨設定 */
}

顏色和背景顏色

顏色 (color) 和背景顏色 (background-color) 屬性值寫法相同，在這邊我們就合再一起講。

• 屬性名：color ( 顏色 )、background-color ( 背景顏色 )
• 屬性值：顏色名稱 ( red, green )、RGB、HEX 等，可參考顏色篇。

範例：

p {
	/* 顏色名稱 */
	color: red;
	background-color: orange;
	
	/* hex 十六進制 */
	color: #000000;
	background-color: #ffffff;
	
	/* rgba */
	color: rgba(34, 12, 64, 0.6); /* 0.6 表示透明度 */
	background-color: rgba(34, 12, 64, 0.6); /* 1 表示不透明 */
}

上一篇：[快速入門前端 20] CSS：長度單位與顏色
下一篇：[快速入門前端 22] CSS 常見屬性(2) 文字樣式和對齊
系列文章列表：[快速入門前端] 系列文章索引列表