第十五章 CSS文本样式
一、字体总汇
二、字体设置
1、font-size
(1)xx-small }
(2)x-small }
(3)small } 设置字体的大小,每个值从小到大的固定值
(4)mediue }
(5)large }
(6)x-large }
(7)xx-large }
例、p{
font-size:50px;
}
(8)smaller } 设置字体相对于父元素字体的大小
(9)larger }
例、body{
font-size:50px; //父元素字体的大小
}
p{
font-size:smaller; //比父元素小一点
}
(10)数字+px
(11)数字+% 使用父元素字体的百分比大小。 //同(9)
2、font-variant 设置字体是否以小型大写字母显示
(1)normal 表示如果以小型大写状态,让他恢复小写状态。
(2)small-caps 让小写字母以小型大写字母显示。
3、font-style
(1)normal 表示让斜体恢复正常状态
(2)italic 表示使用斜体
(3)oblique 表示让文字倾斜。区别在没有斜体时使用。
4、font-weight
(1)normal 表示让加粗字体恢复正常
(2)bold 粗体
(3)bolder 更粗的字体
(4)lighter 轻细的字体
(5)100~900之间的数字 600及之后都是加粗,之前不加粗
5、font-family
例、p{
font-family:楷体,微软雅黑,宋体; //如果电脑里没有楷体,则看有没有微软雅黑,以此类推,如果还没有宋体,则系统恢复系统默认字体。
}
6、font 字体设置简写组合方式。格式如下:
[是否倾斜][是否加粗][是否转小型大写] 字体大小 字体名称
p{
font: small-caps italic bold 50px 楷体; //带[]的元素能互相调整,而把字体大小 字体名称放前面则失效。
}
三、Web 字体(虽说合一用备用字体来解决用户端字体缺失问题,但总究用户体验不好,且不一定所有用户都安装,
所以CSS提供了Web字体,也就是服务器端字体)
1、@font-face{
font-family:abc;
src:url(‘字体文件名‘);
}
p{
font-size:50px;
font-family: abc;
}
//英文字体比较小,而中文字体则很大,所以,中文字体想要使用特殊字体可以使用图片,大面积使用中文字体不太建议。