CSS基础03-CSS字体属性

03-CSS字体属性

CSS Fonts(字体)属性用于定义字体系列、大小、粗细、文字样式(如斜体等)。

3.1字体系列

CSS使用font-family属性定义文本的字体系列。

<style>
	p {
		font-family: Arial, 'Microsoft Yahei', '微软雅黑';
	}
</style>
  • 各种字体之间必须使用英文逗号相隔
  • 一般情况下,如果使用了由空格隔开的多个单词组成的字体,需要加单引号
  • 尽量使用系统默认自带的字体,保证任何浏览器都能正确显示
  • 常见的集中字体:‘Microsoft Yahei’, Tahoma, Arial, ‘Hiragino Sans GB’
  • 当设置了多个字体时,根据先后顺序依次查看系统是否支持,若不支持则查看后一个,若全都不支持则使用系统默认的字体显示
  • 实际开发中,字体设置常用于<body>标签来将整个页面中的字体全部修改掉

3.2字体大小

CSS使用 font-size属性设置字体大小

<style>
	p {
		font-size: 20px;
	}
</style>
  • px(像素)是我们网页中最长使用的单位
  • 谷歌浏览器默认的文字大小为16px
  • 不同浏览器可能默认显示的字号不一致,我们应尽量给一个明确值,而不要使用默认大小
  • 同样可以通过给<body>设置字号大小来指定整个页面文字的大小(标题标签除外,需要单独设定)

3.3字体粗细

CSS使用 font-weight属性来设置字体粗细,属性值有normal(正常字体,相当于number为400,可以用于取消标题等标签的加粗效果)、bold(粗体 相当于number为700,也相当于<strong>和<b>的效果)、bolder(特粗体)、lighter(细体)、number(直接使用数字,不要加单位,相对于单词属性值,数字属性值更推荐使用)

3.4文字样式

CSS使用 font-style属性设置文字样式,属性值有normal(默认值,多用于取消<em>和<i>标签的斜体),italic(斜体)

注意:我们很少用于给文字加斜体,反而多用于使用normal来取消斜体

3.5字体复合属性

字体属性可以把以上的样式综合来写,更节约代码

<style>    
	p {
        /* font: font-style font-weight font-size/line-height font-family*/
        font: italic 700 16px/18px 'Microsoft Yahei';
    }
</style>
  • 使用font属性时,必须按照上面语法格式中的顺序来写,不可以更换顺序,并且各个属性值之间用空格相隔
  • 不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family,否则font属性将不起作用
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值