font-size和line-height

font-size

font-size其实代表的是字体的高度，如果不同的字体设置相同的font-size，字体高度会一样么

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      @font-face {
        font-family: 'MyCustomFont'; /* 定义字体名称 */
        src: url('./Catamaran-Regular.ttf') format('truetype'); /* 兜底方案 */
      }

      @font-face {
        font-family: 'MyCustomFontArial'; /* 定义字体名称 */
        src: url('./Arial.ttf') format('truetype'); /* 兜底方案 */
      }

      @font-face {
        font-family: 'MyCustomFontHELVETI1'; /* 定义字体名称 */
        src: url('./HELVETI1-1.ttf') format('truetype'); /* 兜底方案 */
      }

      p {
        font-size: 100px;
        margin: 0px;
      }
      .a {
        font-family: fangsong;
      }
      .b {
        font-family: 'MyCustomFontArial';
      }
      .c {
        font-family: 'MyCustomFont';
      }
      .d {
        font-family: 'MyCustomFontHELVETI1';
      }
    </style>
  </head>
  <body>
    <p class="a">dphyTx</p>
    <p class="b">dphyTx</p>
    <p class="c">dphyTx</p>
    <p class="d">dphyTx</p>
  </body>
</html>

 会发现每个字体的高度是不一样的，这个是怎么造成的呢？

 

字体原理

1.一款字体首先会定义一个em-square，它是用来盛放字符的金属容器。这个 em-square 一般被设定为宽高均为 1000 相对单位，不过也可以是 1024、2048 相对单位。

2.每个字体会定义5条度量线来控制字符的位置，其中包括 ascender、descender、capital height、x-height，baseline 这5条度量线，这些度量的刻度是基于1000这个相对单位

  • Baseline： 就是我们常说的基线，所有字母放置的水平线。它是文本中一条稳定的轴线，是校准文本与图片，文本与文本的一条重要的参考线。其他度量线都是相对基线来计算的。

  • X-Height： 是主要的小写字母高度（或者说是“x”字母的高度），除去上延和下延部分

  • Cap Height： Cap是capital（大写字母）的简称，有时也用capital height全称，是指H或E等直线型大写字母从基线到字母顶部的高度（大写字母高度）。而H或E等顶部这条对齐线叫作都大写线（cap line）

  • Ascender： 升部线，某些小写字母（例如h、l）会有一个升部（也叫上延），高度超出x-height，这是升部的对齐线

  • Descender： 降部线，某些小写字母（例如p、y）会有一个降部（也叫下延），沿基线往下延长的部分，这是降部的对齐线

其中，Ascender 与 Descender之差决定了字体渲染的高度（不考虑行高），也就是下文将会提到的content-area（内容区域）的高度

3.在浏览器中，上面的 1000 相对单位会按照你需要的 font-size 缩放。

 

具体字体信息参数，可以安装一个FontForge去查看；

以Arial字体为例子：

 

 可以看出来em-square为2048，Ascender为1854，Descender为434，Gap为67

Gap为字体高度减去字体的内容区域的值，即上下两部分的行间距

其中字体的内容区域是：font-size/em-square*（Ascender+Descender）

总的高度，即line-hight为normal，为font-size/em-square*（Ascender+Descender+Gap）,100/2048*(1854+434+67) 约为115px

 

不同系统的FontForge取值参数

 

line-height

内容区域高度(content area)+行间距(vertical spacing)=行高(line-height)，其中行间距分上下部分，间距对半分。

注意：

1.内容区域(content area)高度只与字号(font-size)以及字体(font-size)有关，与line-height没有任何关系。

2.在simsun字体(即宋体)下，内容区域高度等于文字大小值。所以，在simsun字体下，font-size+行间距=line-height。行间距上下拆分，就有了半行间距；

例如在simsun字体下，font-size=240px，line-height=360px，则半行间距是：（360-240）/2 = 60px

 

1.line-height为normal 上述font-size有介绍

2.line-height：1.5 所有可继承元素会自己的font-size重新计算行高，可以理解为只是继承比例值

即假设font-size为30px, 继承元素的font-size为20px, 继承元素的line-height：20*150% = 30px

3.line-height：150% 当前元素根据font-szie 计算行高后，会将这个值继承给下面的元素，可以理解为继承了具体的值。

即假设font-size为30px, 继承元素的line-height：30*150% = 45px，无论继承元素的font-size是多少，line-height：45px

 

值得注意的是，当font-size的的内容区域(content area)高度小于line-height的高度时

虽然视觉上，高度看着是大于line-height的高度，但是其在文档流占据的高度确是line-height的高度

 

 

 

 

 

posted on 2025-04-01 11:34  sss大辉  阅读(91)  评论(0)    收藏  举报

导航