跟着艾文一起学前端-第7篇-CSS-字体样式

CSS中的字体样式属性

属性名称	属性值	描述
font-size	像素值单位px，一定记得带上单位px	像素
font-family	字体的名称，可以是中文、英文或者Unicode编码值	设置字体
font-weight	normal、bold、bolder、lighter、100~900（取100的倍数切注意是没有单位的）	用于定义字体的粗细，通常使用数字值。400等价于normal，700等价于bold
font-style	normal(标准的字体样式，是默认值，用的比较多，可以让斜体实现不倾斜)、italic（斜体）	字体风格

常用字体的中英文名称和Unicode编码(浏览器兼容更好)如下表所示

字体中文名称	英文名称	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

字体使用时的一些常识：
字体：

• 各个字体之间必须用英文逗号隔开
• 中文字体要加英文引号，英文字体不需要加引号，但是英文字体名称中含有空格、#、$等特殊符号时，名称必须要加双引号，为了便于记忆，全加双引号就对了。
• 需要设置英文字体时，英文字体名称必须位于中文字体名称前面
• 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示
• 多个字体时的展示顺序在于遍历这些字体直到支持的字体为止，如果都不支持的话就会使用默认字体进行展示

字体大小：

• 基本要14px及以上
• 值为偶数

思考：
如果说给一个字体设置字体、加粗、风格的话，我们要写成如下的样式咱们已标签选择器为例：

span {
font-size: 14px;
font-weight: 700;
font-style: normal;
}

我们要给字体设置什么样的样式的话就要把它的属性写一遍，然后为了方便看，我们要写很多行，这样对于代码的阅读是有利的，但是对于开发效率来说，是有一定的影响的，所以，基于此问题，就有了如下的内容：综合设置字体的样式

font 属性- 用于综合设置字体样式

语法格式如下：

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

注意：使用font属性时，字体属性必须要按照上面的语法格式对应的属性顺序来写，不能变更字体属性的书写顺序，且各个属性以空格隔开。其中font-size和 font-family属性必须要有，否则font属性将不会起作用，其他的属性值则可以省略。
最简单的写法如下：

p {
	font: 14px "宋体";  /* 这里css的注释方式  ，这里省略了font-style 和font-weight 属性，只写了font-size和font-family属性的值 */
}

CSS文字的外观属性

• color 控制字体的颜色，一般用十六进制的值，如 color: #FF0000 ；
• line-height 行高，单位px，一般情况下行高比字号大小大个8px就可以了 ；
• text-align 文字的水平对齐方式值有left/right/center 左对齐/右对齐/居中 共三种取值情况，对齐方式是让内容居中对齐，不是让容器居中对齐；
• text-indent 首行缩进，单位em ， 1em就是一个字的宽度，比如是汉字的话，就是一个汉字的宽度
• text-decoration 文本装饰，取值为：none（无装饰，可用于取消删除线）、underline（下划线）、overline（上划线）、line-through（贯穿线及删除线）、blink（闪烁）