CSS字体和文本样式

1.字体样式

字体大小：

属性名：font-size

取值：数学+px

注意点：

谷歌浏览器默认文字大小是16px

单位需要设置，否则无效

代码展示：

效果展示：

 

字体粗细：

属性名：font-weight

取值：

关键字：normol(正常）bold(加粗）

数字：400（正常）700（加粗） 

代码展示：

效果展示：
 

字体倾斜：

属性名：font-style

取值：正常（默认值）normal   倾斜 italic

代码展示：

效果展示：

 

字体系列  

属性名： font - family 

常见取值：具体字体1，具体字体2，具体字体3，具体字体4,…，

具体字体：" Microsoft YaHei "、微软雅黑、黑体、宋体、楷体等．.

字体系列： sans - serif 、 serif 、 monospace 等。。。

渲染规则：

1．从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体

2.如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体

注意点：

1.如果字体名称中存在多个单词，推荐使用引号包裹

2.最后一项字体系列不需要引号包裹

3.网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示

代码展示：

效果展示：

常见字体系列（了解）（网页都是非衬线字体）

无衬线字体（ sans - serif )

1．特点：文字笔画粗细均匀，并且首尾无装饰

2．场景：网页中大多采用无衬线字体

3．常见该系列字体：黑体、 Arial 

衬线字体（ serif )

1.特点：文字笔画粗细不均，并且首尾有笔锋装饰

2.场景：报刊书籍中应用广泛

3．常见该系列字体：宋体、 Times New Roman 

等宽字体（ monospace )

1.特点：每个字母或文字的宽度相等

2．场景：一般用于程序代码编写，有利于代码的阅读和编写

3．常见该系列字体： Consolas 、 fira code

样式的层叠问题

如果给一个标签设置了相同的属性，此时样式会层叠（覆盖），写在最下面的会生效。

代码展示：

 

效果展示：

 

字体 font 相关属性的连写

取值： font : style weight size family ;

省略要求：

●只能省略前两个，如果省略了相当于设置了默认值

注意点：如果需要同时设置单独和连写形式

●要么把单独的样式写在连写的下面

●要么把单独的样式写在连写的里面

代码展示：

效果展示：

 

文本样式：

缩进：

属性名：text-indent

取值：数字+px        数字+em(1em=当前标签的font-size的大小）

代码展示：

效果展示：

 

文本水平对齐方式：(文本，图片，span,a，input都行) 

属性名：text-align

取值；

left   向左对齐（默认）

center  居中对齐

right   向右对齐

注意点：

如果要让文本居中对齐，text-align需要给文本标签父标签设置

代码展示：

 效果展示：

文本修饰

属性名： text - decoration 

取值：

属性值                             效果
 underline                   下划线（常用）
 line - through              删除线（不常用）
 overline                      上划线（几乎不用）
 none                          无装饰线（常用）

注意点：

●开发中会使用 text - decoration : none ；清除 a 标签默认的下划线

代码展示：

 

效果展示：

 

行高

作用：控制一行的上下行间距

属性名： line - height 

取值：

●数字＋ px 

●倍数（当前标签 font - size 的倍数）

应用：

1．让单行文本垂直居中可以设置 line - height ：文字父元素高度

2．网页精准布局时，会设置 line - height :1可以取消上下间距

行高与 font 连写的注意点：

●如果同时设置了行高和 font 连写，注意覆盖问题
font : style weight size / line - height family ;

代码展示：

 

效果展示：