前端基础：CSS字体属性

目录

1. 字体系列

2. 字体大小

3. 字体粗细

4. 字体样式

5. 字体复合属性

6. 字体属性总结

---

---

css fonts（字体）属性用于字体系列、大小、粗细、文字样式（如斜体）。

1. 字体系列

css使用font-family属性定义字体。

 P{ 

     font-family:  "微软雅黑/Microsoft YaHei";

}

• 各个字体之间必须用英文的逗号隔开
• 空格隔开的多个单词组成的字体，加引号
• 尽量使用系统默认字体，保证在任何用户的浏览器中都能显示
• 最常见的字体：body { font-family：'Microsoft YaHei',tahome,arial,' Hiragino San GB';}

2. 字体大小

css使用font-size属性定义字体大小

P {

     font-size: 20px;

}

• px(像素)大小是网页最常用的单位
• 谷歌浏览器默认的文字大小是16px
• 不同浏览器默认显示字号大小不一致，我们要给定一个值
• 可以用body指定整个页面大小
• 标题标签比较特殊，需要特定指定大小，不能用body指定

3. 字体粗细

css使用font-weight属性设置字体的粗细

属性值	参数
normal	正常字体，相当于400
bold	粗体，相当于700
bolder	特粗体
lighter	细体

h1 {

      font-weight：bold/700；

}

注意：数值后面不需要加px单位，实际开发中推荐用数值的方式表达

4. 字体样式

css中使用font-style属性设置文本的风格

p {

        font-style: nomal;

}

属性值	作用
nomal	默认值，显示标准的字体样式
italic	斜体的样式

注意：很少给文字加倾斜，反而给倾斜的标签改为不倾斜的字体

5. 字体复合属性

字体复合属性将上面的文字样式综合来写，可以更节约代码，提高开发效率

body {

        font: font-style font-weight font-size/line-height font-family;

}

div {
    font: italic 700 16px/20px 'Microsoft yahei'
}

• 必须按照上面的语法格式顺序来写，不能改变顺序，属性间用空格隔开
• 不需要设置的属性可以省略（默认值），但必须保留font-size和font-family属性，否则不起作用

6. 字体属性总结

属性	表示	注意
font-size	字号	加上px单位
font-family	字体	实际中按照团队要求写
font-weight	字体粗细	加粗是700/bold,不加粗是400；数字不要跟单位
font-style	字体样式	nomal在实际中最常用
font	字体连写	有顺序，不可改变顺序；字体字号必须有