文章目录
前言
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
字体连写
①字体连写是有顺序的,不能随意换位置 ② 字体和字号必须同时出现