目录
一,字体框
二、font-size属性
三、line-height属性
四、line-height和font-size的联系
简介:font-size是css中关于字体的样式属性,注意与文本属性text-xxx进行区别。因为文本由一个个字符组成,所以字体属性也会对文本属性造成影响。
一,字体框
字体框是设计字体时,采用的指定高度,这个高度一旦确定就不会更改。而字体框的宽度会按照比例自行修改。而font-size属性就是指这个字体框的高度。任何字体的基线都是当前字体字母x下端的水平线。
而font-size与line-height的关系如下图,下图中蓝色背景色高度就是line-height,当font-size比line-height小的时候,蓝色框会包住字体。实际上,这个蓝色背景是盒模型属性height的值
由于字体设计的一些特性,导致字体一些约定俗成的协议如下:虽然存在字体框的约束,但是为了字体美观性,超出字体框的现象都存在。比如字母:f、j、g等,但是他们都不可能超过上字体框。
二、font-size属性
单位px,取值大于0。默认为medium。这个属性会被继承。
语法:
font-size : absolute-size | relative-size | length
参数:
1、absolute-size : 根据对象字体进行调节。xx-small | x-small | small | medium | large | x-large | xx-large
2、relative-size : 相对于父对像中字体尺寸进行相对调节。使用成比例的em单位计算。larger | smaller
3、length : 百分数 | 由浮点数字和单位标识符组成的长度值,不可为负值。其百分比取值是基于父对象中字体的尺寸。4、<percentage>
用百分比指定文字大小。其百分比取值是基于父对象中字体的尺寸。不允许负值。
默认值为absolute-size的medium值
三、line-height属性
取值有固定取值,单位px,如100px。还有相对取值,如数字1.5表示是font-size的1.5倍。默认值为normal。也可以是百分比:150%。另外,line-height的取值不能小于0。
四、line-height和font-size的联系
很多属性比如css属性如boder、width、height虽然我们没有明确指定,但是他们也是默认存在的,采用的是默认值。比如width、height没有指定时,它由内容自动撑开,自动生成一个盒子。line-height没有指定时,他的取值为normal,即由浏览器自动确定,浏览器会根据内容字体的大小选择合适的line-height取值。
line-height为手动指定时font-size受影响,但是也可以手动指定line-height,指定之后,line-height的变化不会导致font-size的变化,也不会受到font-size的影响。当line-height比font-size小,则会发生字体重叠的现象,当line-height为0时,此时的盒子height也为0,导致背景色消失。
此外,height属性受到line-height的影响。文章来源:https://www.toymoban.com/news/detail-411432.html
由于盒模型属性height由line-height属性决定撑开,所以当height=line-height时,则会实现单行文本居中。文章来源地址https://www.toymoban.com/news/detail-411432.html
到了这里,关于css的font-size属性、line-height属性、height属性的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!