前言
CSS 字体属性用于定义字体系列、大小、粗细和文字样式(如斜体)
1.font-family
CSS 使用 font-family
属性设置文本的字体系列
<style>
div {
font-family: Arial, "Microsoft Yahe", "微软雅黑";
}
</style>
- 各种字体之间必须使用英文状态下的逗号隔开
- 一般情况下,如果有空格隔开的多个单词组成的字体,加引号
- 最常见的几个字体:
<style>
body {
font-family: "Microsoft Yahe", tahoma, arial, "Hiragino Sans GB";
}
</style>
2.font-size
CSS 使用 font-size
属性设置字体大小
<style>
div {
font-size: 20px;
}
</style>
- px (像素)大小是我们网页的最常用的单位
- 谷歌浏览器默认的文字大小为 16px
3.font-size
CSS 使用font-weight
属性设置字体的粗细
属性值 | 描述 |
---|---|
normal | 默认值(不加粗的),相当于number=400 |
bold | 定义粗体(加粗的),相当于number=700 |
bolder | 定义特粗体 |
100-900 | 400等同于 normal,700等同于 bold,注意这个数字后面不跟单位 |
font-weight: normal | bold | bolder | lighter |number
4.font-style
CSS 使用font-style
属性设置文字样式
<style>
div {
font-style: normal;
}
</style>
属性值 | 作用 |
---|---|
normal | 默认值,浏览器会显示标准的字体样式 |
italic | 浏览器会显示斜体的字体样式 |
5.字体属性复合写法
<style>
div {
font-style: normal;
font-weight: 800;
font-size: 18px;
font-family: 'Microsoft yahe';
}
</style>
字体复合属性可以把以上文字样式综合来写,这样写更节约代码,诸如以上的代码可以简写为
<style>
div {
font: italic 700 16px 'Microsoft yahe';
}
</style>
- 顺序:文字样式 文字粗细 文字大小 文字字体
- 使用font属性时,必须按照上面语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格隔开
- 不需要设置的属性可以省略(取默认值),但必须保留
font-size
和font-family
属性,否则 font 属性将不起作用
6.字体属性总结
属性 | 表示 | 注意点 |
---|---|---|
font-style | 字体样式 | 记住倾斜是 italic,不倾斜是 normal,实际开发最常用 normal |
font-weight | 字体粗细 | 加粗是 700 或者 bold ,不加粗是 normal 或者 400,记住数字不加单位 |
font-size | 字号 | 我们通常用的单位是 px ,一定要跟上单位 |
font-family | 字体 | 实际工作中按照团队约定来写字体 |
font | 字体连写 | ①字体连写是有顺序的,不能随意换位置 ② 字体和字号必须同时出现 |