CSS - 字体相关样式、外观属性

1. 字体相关样式

• font-size：字号大小

用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。

相对长度单位	说明
em	相对于当前对象内文本的字体尺寸
px	像素，最常用，推荐使用
绝对长度单位	说明
in	英寸
cm	厘米
mm	毫米
pt	点

• font-family：字体

用于设置字体，网页中常用的字体有宋体、微软雅黑、黑体等。

可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，查找合适的字体。

常用技巧：

1. 普遍使用14px+
2. 尽量使用偶数的数字序号
3. 各种字体间必须使用英文状态下的逗号隔开
4. 中文字体需要加英文状态下的引号；英文字体一般不需要加引号
5. 如果字体名中包含 空格、#、$ 等符号，则该字体必须加英文状态下的单引号或双引号
6. 尽量使用系统默认字体

• Unicode字体
  可以避免在文件编码（GB2312、UTF-8等）不匹配时产生的乱码的错误。

字体名称	英文名称	Unicode编码
宋体	SimSun	\5B8B\4F53
新宋体	NSimSun	\65B0\5B8B\4F53
黑体	SImHei	\9ED1\4F53
微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隶书	LiSu	\96B6\4E66
幼圆	YouYuan	\5E7C\5706
华文细黑	STXihei	\534E\6587\7EC6\9ED1
细明体	MingLiU	\7EC6\660E\4F53
新细明体	PMingLiU	\65B0\7EC6\660E\4F53

为照顾不同电脑的字体安装问题，尽量只使用宋体和微软雅黑中文字体

• font-weight：字体粗细

用于定义字体的粗细。

可用属性值有：

• normal（即400)：正常字体，声明此值将取消之前任何设置
• bold（即700)：粗体，也相当于b对象的作用
• bolder：特粗体
• lighter：细体
• number：100~900（100的整数倍）

• font-style：字体风格

可用属性有：

• normal：默认值，浏览器会显示标准的字体样式
• italic：浏览器会显示斜体的字体样式
• oblique：浏览器会显示倾斜的字体样式

• font：综合设置字体样式

语法格式：

选择器{ 
	font: font-style font-weight font-size/line-height font-family;
}

使用font属性时，必须按照语法格式的顺序书写，不能更换顺序，各个属性以空格隔开。

注意：
其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

2. CSS外观属性

• color：文本颜色

取值方式：

1. 预定义的颜色值，如red，green，blue等；
2. 十六进制，如#FF0000，#FF6600等，实际工作中最常用十六进制的颜色定义方式；
3. RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。
   如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号！

• line-height：行间距

设置字符的垂直间距，一般称为行高。

常用的属性值单位：

1. 像素px，使用最多
2. 相对值em
3. 百分比%

一般情况下，行距比字号大7或8左右的像素。

• text-align：水平对齐方式

属性值：

• left：左对齐（默认值）
• right：右对齐
• center：居中对齐

• text-indent：首行缩进

用于设置首行文本的缩进。

属性值：

1. 不同单位的数值
2. em字符宽度的倍数
3. 相对于浏览器窗口宽度的百分比%

允许使用负值，建议使用em作为设置单位

• text-decoration：文本的装饰

通常用于给链接修改装饰效果.

值	描述
none	默认，定义标准的文本，无装饰
underline	下划线
overline	上划线
line-through	贯穿线
blink	闪烁