前端——探索文本样式的秘密

Bingtangbgd

已于 2022-06-19 11:19:30 修改

阅读量171

点赞数

分类专栏：前端文章标签：前端 css css3

于 2022-06-05 15:27:16 首次发布

本文链接：https://blog.csdn.net/Bingtangbgd/article/details/125129658

版权

前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

#博学谷IT学习技术支持#

字体和文本样式

可以看到，随着设置的字体大小的变化，浏览器中的字号也在变化，这就是字体大小属性，而对于那些不是默认字号的文字，也可以通过该属性改变字体大小，刚刚提到过，浏览器默认字体大小是16px，但是我们之前提到的h系列元素，也就是标题，本身自带相应的字体大小，而这些依然可以通过font-size改变大小，比如我们把最大号的h1的字体大小改成默认的16px大小：

d1被注释掉了，不起作用，d2设置了字体大小为16px，能明显看出来字体大小不一样，但是他们依旧保留着自带的加粗效果，那么，下面我们讲字体粗细的属性。

字体粗细

字体粗细，font-weight，格式为font-weight：400；属性值是数字，切记不带单位，字体的默认粗细就是400，也就是正常效果，而加粗效果是700，也就是font-weight：400；除了用数字以外，也可以用引文单词bold来代替700，或者normal代替400实现默认效果，实现加粗效果，比如以下示例：

可以明显看到文字的粗细情况，该属性和文字大小一样，可以把自带加粗效果的元素设置成默认粗细，比如h系列元素，b标签等，说到b标签的加粗效果，应该能联想到 i 标签的倾斜效果，下面我们来说一下倾斜属性

字体倾斜

字体倾斜，font-style，格式font-style：normal；normal表示正常，也就是不倾斜，italic表示倾斜，同样的，i 标签等这些自带倾斜属性的也是可以通过font-style属性来修改，如下示例：

除了以上属性，我们应该都听过比如宋体这种，那么，下面我们来说一下字体样式。

字体样式

字体样式，font-family，这个我们一般不去设置，直接使用浏览器默认样式，因为字体样式种类太多，你所设置的样式，别的电脑上的浏览器可能识别不出来这种字体，就会出现显示错误，除非别人把这种字体样式下载到本地，这就有点复杂了，所以一般不去设置这一属性，而系统默认的样式是微软雅黑。这里就不在过多解释。下面我们来看一下他们的复合属性的写法。

复合属性

font系列属性的复合写法，font: style weight size family，切记这个是有顺序的，一定要按照字体倾斜，字体粗细，字体大小，字体样式的顺序写，但是，前两个属性可以省略，相当于默认值，必须要有后两个属性，所以一般也不用复合属性，个人是比较喜欢用他的拆分写法。

文本缩进

文本缩进，text-indent，我们在看到一篇文章的时候，通常文章的每一段都会有两字符的文本缩进，所以，它，来了，格式：text-indent：32px；由于我们浏览器默认字体大小是16px，而首行缩进两字符的话，也就是32px，当然，如果想缩进的更多或者更少，也可以根据需要自行设置，那么我们先来看一下效果，看是否满足要求：

可以看到，效果也是就是文本首行缩进了两字符，但是问题来了，系统默认字体大小是16px，但我嫌字体太小，如果我设置成20px呢：

可以看到，缩进的不到两字符，大概有1.5个字符，那总不能改一次字号就修改一次缩进值吧，所以就有了下面这个单位，em，我们可以用em代替px，em就表示字符，1em表示1字符，那我们设置成2em，就是缩进两字符了，我们再来看改变字体大小会不会影响缩进值：

可以看到，即使字号改变，缩进值也是两个字符，不会因为字号改变，而缩进值不变导致结构变化。

文本水平对齐方式

文本水平居中，text-align，格式：text-align：center；通常我们可以看到，一篇文章的标题不是从最左边开始的，而是整个标题在盒子的水平正中间，这其实就是text-align属性修改的，下面我们来看一下具体的使用示例：

可以明显看得出来，第二个盒子里的内容确实是水平居中显示的，而第一个盒子因为没有加text-align: center;所以不会居中显示。而且不仅仅是居中显示，也可以让他右对齐显示，属性值为right，当然，左对齐也是可以的，因为默认就是左对齐，所以需要左对齐的话，完全可以不设置，左对齐的属性值为left。

文本修饰

文本修饰，text-decoration，该属性的属性值有几个属性值，分别是下划线underline，删除线line-through，上划线overline，无装饰线none。同样的，标签自带的修饰线也可以进行修改，不如del标签自带的删除线，以及a标签自带的下划线，都可以通过text-decoration：none来去掉，当然也可以把正常的文字加上修饰线，以下是三种修饰线的示例：

一般很少会用到上划线，所以只需要记住用法就行

行高

行高，line-height，一篇文章中，如果两行文字挨得太近，就会看着很不舒服，尤其是满屏的文字的时候，这时候就要适当加高两行之间的间距，这个间距是上一行文字的文字底部和下一行文字的文字顶部共同组成的，浏览器默认行高是1.5倍，也就是文字大小的1.5倍，如果觉得不合适可以通过line-height属性来做修改，属性值可以加单位表示多少像素，也可以不加单位表示多少倍，这点一定要分清，来看示例：

可以看到，前两行的高度除了文字就没有空隙了，而后面两行除了文字还有一小部分空隙，这就是因为前两行是1倍行距，后两行是1.5倍行距，而且写法都是有/没有单位两种写法，不带单位就是直接1倍或者1.5倍，带单位就是16px或者24px（因为浏览器默认字体是16px，1倍就是16萍乡，1.5倍就是24px）。

文本垂直居中

想要把文字垂直居中，我们只需要把文字的行高设置成父级盒子的高度就可以了，如下示例：

第一个盒子是浏览器默认的1.5倍，也就是24px，第二个是修改的80px，与盒子高度一致，所以第一个并没有居中，而第二个垂直居中，但是问题来了，这个方法只对单行文字有效，多行文字的话，因为行间距都是盒子高度，所以除了第一行，其他的都会被挤出盒子，不过可以让他们平分盒子高度来优化，但是也有缺陷，盒子一般不会刚好被平分成想要的份数，所以，这只是一个办法，具体的方法要等到以后才能讲，这里暂不多说。

复合属性进阶

文本复合属性进阶，font: style weight size/line-height family，其实这里只是加入了行高属性，行高属性要写在文字大小的后面，并且要通过“/”来隔开，中间除了“/”不需要其他符号，同样的，复合属性顺序不能乱，前两个可以省略，相当于设置的默认值。

层叠性

这里你可以暂时认为是往桌子上放书本，一个一个往上放，俯视下只能看到最后放上去的那本，这就是层叠性，前提是相同属性，比如文字大小，后边层叠前边，不同属性不会被层叠，比如设置了文字大小，下边在设置行高，就不会互相影响，来看示例：

可以看到，行高设置了两次，第一次为80px，与盒子高度一致，第二次为40px，只占了盒子高度一半，很明显，第二次的生效了，说明第一次的被层叠掉了，同样的，文字大小也是一样，但是不用属性之间不会层叠，都能体现出来

总结

字体大小	font-size	数字+px
字体粗细	font-weight	数字（400正常，700加粗）
		bold 加粗
		normal 正常
字体倾斜	font-style	normal 正常
		italic 倾斜
字体样式	font-family	默认使用的是微软雅黑（一般不设置）
文本缩进	text-indent	数字+px
		数字+em
水平对齐方式	text-align	left 左对齐（默认）
		center 居中对齐
		right 右对齐
文本修饰	text-decoration	underlian 下划线
		line-through 删除
		overline 上划线
		none 无装饰线
行高	line-height	数字+px
		倍数（不带单位）
垂直居中	设置行高等于父级盒子高度（只对单行文字有效）
font复合属性	font: style weight size/line-height family
	顺序不能乱，前两个属性可省，相当于设置的默认值
层叠性	同种属性，后者层叠前者