css字体样式

1.字体大小

属性名：font-size

取值：数字+px

注意点：

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

2.字体粗细

属性名：font-weight

取值：

关键字：正常：normal 加粗：bold
纯数字：正常：400 加粗：700（100~900的整百数）
注意点：

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

3.字体样式

属性名：font-style

取值：正常：normal 倾斜：italic

常见字体系列（了解）

无衬线字体（sans-serif）

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

4.衬线字体（serif）

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

5.等宽字体（monospace）

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

5.字体系列

属性名：font-family

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

具体字体：“Microsoft YaHei”、微软雅黑、黑体、宋体、楷体等……
字体系列：sans-serif、serif、monospace等…
渲染规则

从左往右按照顺序差找，如果电脑中未安装该字体，则显示下一个字体
如果都不支持，则显示最后设置的字体系列的默认字体
注意点：

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

6.样式的层叠问题

问题：给同一个标签设置了相同的样式，此时浏览器会如何渲染呢？

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

TIP：

CSS （Cascading style sheets） 层叠样式表
所谓的层叠即叠加的意思，表示样式可以一层一层的层叠覆盖
字体font相关属性的连写

属性名：font
取值：
font:style weight size/line-height family;
巧记：swsf （稍微舒服）
省略问题：只能省略前两个，如果省略前两个相当于设置了默认值
省略的覆盖问题：如果需要同时设置单独的属性和连写形式
要么把单独的样式写在连写的下面
要么把单独的样式写在里面
字体相关属性总结

7.字体大小： font-size
数字+px
字体粗细：font-weight
正常：normal 或 400
加粗：bold 或 700
8.字体样式：font-style
正常：normal
倾斜：italic
字体系列：font-family
具体字体1,具体字体2,具体字体3,具体字体4,…,字体系列
字体连写：font
font : style weight size family;