一，字体框

字体框是设计字体时，采用的指定高度，这个高度一旦确定就不会更改。而字体框的宽度会按照比例自行修改。而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的影响。

由于盒模型属性height由line-height属性决定撑开，所以当height=line-height时，则会实现单行文本居中。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/414406.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！