Day 07 CSS <字体属性>

CSS Fonts(字体) 属性
用於定义字体系列、大小、粗细 和文字样式(ex:斜体)

1.字体系列
font-family 属性定义文本的字体系列

<style>
    body{
        font-family: Georgia, 'Times New Roman', Times, serif;
        }
</style>

备注 :

• 各种字体之间必须使用逗号隔开
• 一般情况下 如果有空格隔开多个单词组成的字体，加上"单引号"
• 尽量使用系统自带默认字体
• 最常见的几个字体: body{font-family:'Microsoft YaHei' ,tahoma , arial;}
• 一般直接修改body标签，若有多字体将会照顺序去选取

2.字体大小
font-size属性定义字体大小

p{
font-size: 20px;
}

备注 :

• px(像素)大小是我们网页的最常用单位
• google chrome 默认文字大小为16px
• 不同浏览器默认大小不一，尽量给明确大小
• 可以给body指定整个页面大小
• 标题标签较特殊 需要单独指定文字大小

3.字体粗细
font-weight属性定义字体粗细

p{
font-weight: bold;
}

备注 :

• 可让粗标签(比如h&stong等)不加粗，或者其他标签加粗
• 实际开发时，更常用数字表示粗细
• normal为默认值 bold粗体为700，用数字表示400=normal 700等同於bold

4.文字样式
font-style 属性设置文字风格

p{
font-style: normal;
}

备注 :

• normal为默认值
• ltalic为斜体
• 平时反而很少给文字加斜体，反而较常把斜体标签(em , i)改为不倾斜

5.font复合属性

body{
/* font: font-style font-weight font-size- font-family */
font: italic 700 16px Impact;
}

• 使用font属性时，必须按照语法格式的顺序书写，不能更换顺序，并且每个属性间用空格隔开
• 不需要设置的属性可以省略(将取默认值)，但必须保留font-size和font-family属性，否则font属性将不起作用

字体属性范例