[快速入门前端 21] CSS 常见属性(1) 字体样式和颜色

字体 font 系列

属性说明语法font-size设定文字大小font-size: 20px;font-weight设定文字粗细font-weight: bold;font-family设定字体font-family: "Gill Sans Extrabold", "sans-serif";font-style设定文字样式 (斜体)font-style: italic;font设定文字样式组font: bold 30px “sans-serif”;

字体大小

属性名：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设定文字颜色color: red;background-color设定背景颜色background-color: red;

颜色 (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) 文字样式和对齐
系列文章列表：[快速入门前端] 系列文章索引列表