CSS 字体属性用于定义字体系列、大小、粗细和文字样式(如斜体)
1.font-family
- CSS 使用 font-family 属性设置文本的字体系列
div {
font-family:Arial,"Microsoft Yahe","微软雅黑";
}
- 各种字体之间必须使用英文状态下的逗号隔开
- 一般情况下,如果有空格隔开的多个单词组成的字体,加引号
- 指定多个字体,如果浏览器不支持第一个字体就会尝试下一个直到找到合适的字体,如果都没有,以电脑默认字体为准。
- 最常见的几个字体:
body {
font-family: "Microsoft Yahe",tahoma,arial,"Hiragino Sans GB";
}
-
CSS Unicode字体
-
在 CSS 中设置字体名称,直接写中文是可以的。但是在文件编码(GB2312、UTF-8 等)不匹配时会产生乱码的错误。
- xp 系统不支持 类似微软雅黑的中文。
- 解决方案:英文来替代。比如
font-family:"Microsoft Yahei"
。在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称,浏览器是可以正确的解析的。
-
font-family: "\5FAE\8F6F\96C5\9ED1"; /* 表示设置字体为“微软雅黑”。 */
2.font-size
- ont-size属性用于设置字号(字体大小)
谷歌浏览器
默认的文字大小为16px- 不同浏览器可能默认显示的字号大小不一致,尽量给一个明确值大小,不要默认大小。一般给body指定整个页面文字的大小。
单位
- 相对长度单位、绝对长度单位
相对长度单位 | 说明 |
---|---|
em | 相对于当前对象内文本的字体尺寸 |
px | 像素,最常见,推荐使用 |
绝对长度单位 | 说明 |
---|---|
in | 英寸 |
cm | 厘米 |
mm | 毫米 |
pt | 点 |
3.font-weight
- CSS 使用 font-weight 属性设置字体的粗细
font-weight: normal | bold | bolder | lighter | number
属性值 | 描述 |
---|---|
normal | 默认值(不加粗的),相当于number=400 |
bold | 定义粗体(加粗的),相当于number=700 |
bolder | 定义特粗体 |
100-900 | 400等同于 normal,700等同于 bold,注意这个数字后面不跟单位 |
实际开发中,更喜欢用数字表示粗细
注意:让标题等默认加粗的部分时期正常设置font-weight属性即可
4.font-style
- CSS 使用 font-style 属性设置文字样式
li {
font-style: normal;
}
属性值 | 作用 |
---|---|
normal | 默认值,浏览器会显示标准的字体样式 |
italic | 浏览器会显示斜体的字体样式 |
注意:一般很少给文字加斜体,反而要给斜体标签( em , i )改为不倾斜字体(即将font-style设为normal)
5.字体属性复合写法
字体复合属性可以把以上文字样式综合来写,这样显得更加简洁。
/* 想要div 文字变倾斜 加粗 字号设置为16像素 并且是微软雅黑 */
div {
font-style: italic;
font-weight: 700;
font-size: 16px;
font-family: 'Microsoft yahe';
/* 复合属性:简写的方式 节约代码*/
/* 顺序:font-style font-weight font-size/line-height font-family */
font: italic 700 16px 'Microsoft yahe';
}
- 顺序:文字样式 文字粗细 文字大小 文字字体
- 使用font属性时,必须按照上面语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格隔开
- 不需要设置的属性可以省略(取默认值),但必须保留
font-size
和font-family
属性,否则 font 属性将不起作用
6.字体属性总结
属性 | 表示 | 注意点 |
---|---|---|
font-size | 字号 | 通常用的单位是px 像素,一定要跟上单位 |
font-family | 字体 | 实际工作中按照团队约定来写字体 |
font-weight | 字体粗细 | 记住加粗是 700 或者 bold 不加粗 是 normal 或者 400,记住数字不要跟单位 |
font-style | 字体样式 | 记住倾斜是 italic,不倾斜 是 normal,实际开发最常用 normal |
font | 字体连写 | (1)字体连写是有顺序的,不能随意换位置 (2)字体和字号必须同时出现 |