font属性、字体、文本样式的介绍以及使用方法

发布于:2023-01-23 ⋅ 阅读:(653) ⋅ 点赞:(0)

一、字体

1、字体大小

谷歌浏览器的默认字体样式为16px,设置字体的属性为font-size,值为 数字 + px 如果单独设置个数字是没有效果的
在这里插入图片描述
在这里插入图片描述

2、字体粗细

在网页中字体粗细用font-weight控制,font-weight的值分为两种方式,一种是关键字normal(正常状态)和bold(加粗状态),第二种是数字的方式,数字的取值范围在100到900的整百数间,一般取值为400(正常状态)和700(加粗状态)
在这里插入图片描述
在这里插入图片描述

3、字体样式

font-style属性,用于控制文字是否倾斜,值为normal(正常状态)和italic(倾斜状态)
在这里插入图片描述
在这里插入图片描述

font-family属性,用于控制文字的类型,比如 宋体、楷体、微软雅黑等,值就是字体的名字,取值方式为字体1,字体2,字体3…,浏览器会从左往右查找,一般是使用第一个值的字体样式,如果电脑中未安装该字体的话,就会跳过,继续找下一个字体,直到最后一个值还未找到电脑中安装的字体的话,就会显示默认字体
在这里插入图片描述
在这里插入图片描述

4、字体font属性的连写

字体样式的属性可以连在一起写,书写的方式是有顺序区分的font : style weight size family,如果要省略的话只能省略前两个样式,size和family这两个值是必须设置的,省略的值会自动使用默认的值,如果font-size或其它font属性要分开设置的话,最好设置在font连写属性的后面,不然会被font属性的默认值覆盖的
在这里插入图片描述
在这里插入图片描述

二、文本样式

1、文本缩进

文本缩进属性为text-indent,值为数字+px或者数字+em(1em=当前标签font-size的大小)
在这里插入图片描述
在这里插入图片描述

2、文本水平对齐

文本对齐属性为text-align,text-align属性有三个值,分别是left(左对齐)、center(居中对齐)、right(右对齐),text-align:center可以让文本、span标签、a标签、input标签和image标签都居中
在这里插入图片描述
在这里插入图片描述

3、文本修饰

文本修饰属性为text-decoration,值为underline(文本下划线)、none(没有文本修饰线)、line-through(文本删除线)、overline(文本上划线),在开发中,一般会使用text-decoration:none来清除a标签默认的下划线效果
在这里插入图片描述

在这里插入图片描述

4、文本行高

行高为line-height属性,可以控制行间距,让单行文本垂直居中时会用到line-height属性
没有用line-height属性前文字是黏在一起的,文字上下行的间距很小
在这里插入图片描述
在这里插入图片描述

用line-height属性可以控制上下行文字间的间距,使文字排版变的更好看
在这里插入图片描述
在这里插入图片描述

本文含有隐藏内容,请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到