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不能省略,否则不起作用