目录
1.字体系列
CSS使用font-family定义文字的字体系列
<style>
p {
/* font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif; */
font-family: 'Times New Roman', Times, serif;
}
</style>
注意事项
- 各种字体之间必须用逗号隔开
- 一般情况下,多个单词组成的字体要加引号
- 尽量使用默认字体
2.字体大小
CSS使用font-size定义文字的字体大小
<style>
body {
font-size: 16px;
}
/* 标题标签比较特殊,需要单独指定文字大小 */
h2 {
font-size: 16px;
}
</style>
注意事项
- px(像素)是字体大小最常用的单位
- 尽量设置一个明确的字体大小,不要使用默认大小,因为不同浏览器的默认字体大小可能不一样
- 可以个body指定整个页面文字的大小
3.字体粗细
CSS使用font-weight属性设置字体粗细
<style>
.bold {
/* font-weight: bold; */
/* 700的后面不要跟单位,等价于 bold 都是加粗的效果 */
/* 实际开发中,尽量使用数字来表示加粗或者变细 */
font-weight: 700;
}
h2 {
font-weight: 400;
/* font-weight: normal; */
}
</style>
属性值 | 描述 |
---|---|
normal | 默认值 |
bold | 加粗 |
100-900 | 400等同于normal,700等同于bold,数字后面不跟单位 |
注意事项
- 实际开发中尽量用数字表示粗细
4.字体样式
CSS使用font-style属性设置字体样式
<style>
p {
font-style: italic;
}
em {
/* 让倾斜的字体不倾斜 就是赶紧脉动回来 */
font-style: normal;
}
</style>
5.font复合属性写法
CSS使用font属性定义字体的系列、大小、粗细和样式
<style>
/* 想要div文字变倾斜 加粗 字号设置为16像素 并且 是微软雅黑 */
div {
/* font-style: italic;
font-weight: 700;
font-size: 16px;
font-family: 'Microsoft yahei'; */
/* 复合属性: 简写的方式 节约代码 */
/* font: font-style font-weight font-size/line-height font-family; */
/* font: italic 700 16px 'Microsoft yahei'; */
font: 20px '黑体';
}
</style>
注意事项
- 使用font属性时,必须按照上面的属性顺序书写,不能更换顺序,各个属性值间以空格隔开
- 不需要设置的属性可以省略,但必须保留font-size和font-family属性,否则font属性不起作用