CSS字体属性

1.字体系列

h2 {
    font-family: '微软雅黑';
}
p {
    font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif;
}

• 各种字体之间必须使用英文状态下的逗号隔开
• 一般情况下，如果有空格隔开的多个单词组成的字体，加引号
• 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
• 多个字体：兼容性好，如果没有向后找

自定义字体

可以声明自定义字段，如果客户端不存在将下载该字体，使用方式也是通过 font-family 引入。

@font-face {
    font-family: "houdunren";
    src: 	url("SourceHanSansSC-Light.otf") format("opentype"),
        url("SourceHanSansSC-Heavy.otf") format("opentype");
}

字体	格式
.otf	opentype
.woff	woff
.ttf	truetype
.eot	Embedded-opentype

不建议使用中文字体，因为文件太大且大部分是商业字体。

2.字体大小

（1）字符串

字号用于控制字符的显示大小，包括 xx-small | x-small | small | meidum | large | x-large | xx-large。

（2）px

body {
    font-size: 16px;
}
h2 {
    font-size: 18px;
}

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

（3）百分数

百分数是子元素相对于父元素的大小

（4）em

1em=当前字号大小一个字的宽度

3.字体粗细

.bold {
    /* font-weight: bold; */
    font-weight: 700;
    /* 实际开发更提倡使用数字，700后面不要跟单位，等价于bold加粗 */
}
h2 {
    /* font-weight: normal; */
    font-weight: 400;
}

属性值	描述
normal	默认不加粗
bold	加粗的
100~900	400=normal 700=bold 数字后面不跟单位

• 实际开发中更喜欢使用数字表示粗细

4.文字样式（风格）

p {
    font-style: italic;
}
em {
    font-style: normal;
}

属性值	作用
normal	默认值，标准字体样式
italic	斜体字

• 通常我们把斜体标签（em，i）改为不倾斜字体

5.字体复合属性

div {
    /* font-style: italic;
    font-weight: 700;
    font-size: 16px;
    font-family: 'Microsoft yahei'; */
    /* 不能颠倒顺序 */
    /* font: font-style font-weight font-size/font-height font-family; */
    font: italic 700 16px 'Microsoft yahei';
}

• 必须按语法格式的顺序书写，不能颠倒顺序，属性间用空格隔开
• 不需要设置的属性可以省略（取默认值），但font-size和font-family不能省略，否则不起作用