解析CSS行内布局（一）：字体

我们眼中的字体是由多种因素构成的，其中包括字体系列、字号、字重、行高、字符间距等，这些影响着文字阅读的体验。特别是在网页设计中，掌握字体的设置可以帮助你更好地控制页面上的文本内容，提高用户体验。本文将聚焦于字体本身，试图让你能够深入了解字体，探究字号、行高等概念，以及它们之间的关系。

字体设计基本概念

为了更好地掌握如何控制文字的呈现，我们首先需要了解字体设计的一些基本概念。这些概念不仅仅是构成字体的组成部分，它们还是我们控制文字外观的重要工具。

字形（Glyph）

字形就是你所能看见的每一个文字形象，它是有边界的，我们称之为轮廓，这个轮廓可以是封闭的，也可以是开放的。拿字母A来举例，它的轮廓就是一个开放的路径，而数字0的轮廓就是封闭的。轮廓线的形状决定了我们看到的文字的具体形状。

字宽（Width）

字宽指的是一个字形在水平方向上的宽度。字宽可以是固定的，也可以是可变的。固定字宽字体每个字形的宽度都是相同的，而可变字宽字体每个字形的宽度都不相同。例如，字母“i”和字母“W”的宽度就不同。

字高（Height）

字高指的是一个字形在垂直方向上的高度。字高可以是固定的，也可以是可变的。固定字高字体每个字形的高度都是相同的，而可变字高字体每个字形的高度都不相同。例如，字母“g”的字高就比字母“f”的字高要大。

基线（Baseline）

基线是文本中最底部的那条线，文本中的所有字形都是基于这条线来对齐的。基线通常与书写表面平行，但它也可以倾斜或弯曲。

上升部（Ascent）

上升部是指字形中高于基线的最高点。上升部的高度通常由字体设计师根据字体的整体视觉效果来确定。

下降部（Descent）

下降部是指字形中低于基线的最低点。下降部的高度通常由字体设计师根据字体的整体视觉效果来确定。

字面（Em Square）

字面是指字形所占据的矩形区域。字面的宽度和高度都等于字体的字号。

UPM（Units Per Em）

UPM是指字体的字号，它是用来测量字体中各种元素的单位。UPM可以分为水平UPM和垂直UPM。水平UPM是指字体的字宽，垂直UPM是指字体的字高。

X高度（X-Height）

X高度是指小写字母“x”的高度。X高度通常用来衡量字体的可读性。X高度较高的字体通常更易于阅读。

衬线（Serif）

衬线是指字形笔画末端的小装饰。衬线可以使字体看起来更具装饰性和美感。

无衬线（Sans Serif）

无衬线是指没有衬线的字体。无衬线字体通常更易于阅读，尤其是在较小的尺寸下。

行内元素内容区域高度的计算

行内元素内容区域的高度由以下几个因素决定：

• 字号（font-size）
• 行高（line-height）
• 上升部（ascent）
• 下降部（descent）

行内元素内容区域的高度计算公式如下：

行内元素内容区域高度 = 字号 + 行高 + 上升部 + 下降部

例如，如果字号为16px，行高为1.5，上升部为3px，下降部为2px，那么行内元素内容区域的高度为：

16px + 1.5 * 16px + 3px + 2px = 33px

font-size是如何决定文字大小的

font-size属性决定了文字的大小。font-size可以是绝对单位（如px、pt、em等）或相对单位（如%）。

• 绝对单位 ：绝对单位的数值代表了文字的实际大小。例如，如果font-size设置为16px，那么文字的大小就是16像素。
• 相对单位 ：相对单位的数值代表了文字的大小相对于父元素的字体大小。例如，如果font-size设置为1.5em，那么文字的大小就是父元素字体大小的1.5倍。

font-size属性还可以使用来指定文字的大小。这些关键字包括：

• xx-small ：极小
• x-small ：小
• small ：中等
• medium ：大
• large ：很大
• x-large ：特大
• xx-large ：极大

这些关键字的大小是相对的，它们的实际大小取决于浏览器的默认设置。

总结

本文介绍了字体设计的基本概念，包括字形、字宽、字高、基线、上升部、下降部、字面、UPM、X高度、衬线和无衬线。还介绍了行内元素内容区域高度的计算方法和font-size是如何决定文字大小的。这些知识对于你更好地控制页面上的文本内容，提高用户体验非常重要。