CSS —— 字体和文本样式

字体样式

字体大小

属性名： font-size

取值：数字+px

注意点：

• 谷歌浏览器默认文字大小是16px
• 单位需要设置，否则无效

字体粗细

属性名 ：font-width

取值：

• 关键字

正常	margin
加粗	bold

• 纯数字：100 - 900的整百数

正常	400
加粗	700

注意点

• 不是所有字体都提供了九种粗细，因此部分取值 页面中无效
• 实际开发中以：正常、加粗 两种取值使用最多

字体样式（是否倾斜）

属性名：font-style

取值：

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

字体系列 font-family

属性名：font-family

常见取值：具体字体1，具体字体2，具体字体3，具体字体4....，字体系列

• 具体字体：Microsft YaHei，微软雅黑，黑体，宋体，楷体等
• 字体系列：sans-serif，serif，monospace等

渲染规则：

1. 从左往右按照顺序查找，如果电脑中未安装该字体，则提示显示下一个字体
2. 如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体

注意点：

1. 如果字体名称中存在个单词，推荐使用引号包裹
2. 最后一项字体系列不需要引号包裹
3. 网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示

系统	默认字体
Windows	微软雅黑
macOS	苹方

常见字体系列

无衬线字体（ sans-serif ）：

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

衬线字体（ serif ）：

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

等宽字体：

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

样式的层叠问题

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

所谓的层叠即是覆盖的意思，表示样式可以一层一层的层叠覆盖

字体font相关属性的连写

属性名：font（复合属性）

取值：

font：style size weight family；

省略要求

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

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

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

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