CSS——字体和文本样式

1. 字体样式

1.1. 字体大小

• 属性名： font - size
• 取值：数字＋ px
• 注意点：谷歌浏览器默认文字大小是16px
• 单位需要设置，否则无效

1.2. 字体粗细

• 属性名： font - weight
• 取值：

关键字：

正常	normal
加粗	bold

纯数字： 100~900的整百数：

正常	400
加粗	700

• 注意点：不是所有字体都提供了九种粗细，因此部分取值页面中无变化

实际开发中以：正常、加粗两种取值使用最多

1.3. 字体样式（是否倾斜）

• 属性名： font - style
• 属性名： font - style
• 取值：正常（默认值）：normal

倾斜：italic

1.4. 字体系列

• 属性名： font - family
• 常见取值：具体字体1，具体字体2，具体字体3，具体字体4，…，字体系列

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

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

• 渲染规则：从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体；

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

• 注意点：如果字体名称中存在多个单词，推荐使用引号裹；

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

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

1.5. 常见字体系列（了解）

1.5.1.无衬线字体（ sans - serif )

• 特点：文字笔画粗细均匀，并且首尾无装饰
• 场景：网页中大多采用无衬线字体
• 常见该系列字体：黑体、 Arial

1.5.2.衬线字体（ serif )

• 特点：文字笔画粗细不均，并且首尾有笔锋装饰
• 场景：报刊书籍中应用广泛
• 常见该系列字体：宋体、 Times New Roman

1.5.3.等宽字体（ monospace )

• 特点：每个字母或文字的宽度相等
• 场景：一般用于程序代码编写，有利于代码的阅读和编写
• 常见该系列字体： Consolas 、 fira code

1.6. 样式的层叠问题

• 问题：给同一个标签设置了相同的样式，此时浏览器会如何渲染呢？
• 结果：如果给同一个标签设置了相同的属性，此时样式会层叠（覆盖），写在最下面的会生效

1.7. 字体 font 相关属性的连写

• 属性名： font （复合属性）
• 取值：font : style weight size family;

font: style weight size family;
font: italic 700 66px 宋体；

• 省略要求：只能省略前两个，如果省略了相当于设置了默认值
• 注意点： 如果需要同时设置单独和连写形式

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

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

2. 文本样式

2.1. 文本缩进

• 属性名： text - indent
• 取值：数字＋ px

数字＋ em （推荐：1em=当前标签的 font - size 的大小）

text-indent: 2em;

2.2. 文本水平对齐方式

• 属性名： text - align
• 取值：

属性值	效果
left	左对齐
center	居中对齐
right	右对齐

• 注意点：如果需要让文本水平居中， text - align 属性给文本所在标签（文本的父元素）设置

text - align : center 能让哪些元素水平居中？

答：1.文本

2. span 标签、a 标签

3. input 标签、img 标签

注意点：如果需要让以上元素水平居中， text - align : center 需要给以上元素的父元素设置

2.3. 文本修饰

• 属性名： text - decoration
• 取值：

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

• 注意点：开发中会使用 text - decoration : none ；清除 a 标签默认的下划线

3. line - height行高

3.1. 行高

• 作用：控制一行的上下行间距
• 属性名： line - height
• 取值：数字＋ px

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

• 应用：让单行文本垂直居中可以设置 line - height ：文字父元素高度；

网页精准布局时，会设置 line - height（可以取消上下间距）；

• 行高与 font 连写的注意点：如果同时设置了行高和 font 连写，注意覆盖问题；

font : style weight size/line-height family;