让我们修复字体大小

当您设置时会发生什么＆＃34; font_size＆＃34 ;: 32在您最喜欢的编辑器中？无论如何，我会告诉你的，但我很高兴你问道。

32不是字母的宽度或高度，也不是大写字母高度，X字母高度，升级高度，下降高度。到底是怎么回事？

首先，这大小不是像素，它是点。点是测量的物理单元，等于1/72英寸（0.353毫米），源自排版。

此处的想法是您将字体大小直接设置为物理单元，忽略屏幕分辨率等分钟详细信息。如果我想看到我的字母高2英寸，我可以通过将字体大小设置为144 pt来进行。

在实践中，没有人这样做。相反，MacOS始终使用72个PPI来转换为像素。如果将MACOS放在32“监视器和24”监视器上，则设置为1080p分辨率，您将获得相同的像素大小，但不是物理大小，破坏原始想法。

为什么72号？结果，原始MAC用于以72 PPI恰好显示。如果在那里查看文本，它在屏幕上的物理大小将在打印时匹配其物理大小。好的！当然，Mac显示器以来，他们的PPI改善，但公约停留。

本着真正的合作精神，Windows使用96 PPI而不是72.为什么不72？不是因为他们有更好的显示（他们没有），但是因为72给了你太少的像素来渲染清晰的文本。所以他们本身，为什么不使一切都更大？

事实上，他们确实如此。 这持有这一天：在Windows上的16个PT文本是大于16 PT文本的摩托斯。 乐趣！ P.S. vs代码似乎拍摄了编辑器。直接以像素中直接提出值。 这是一开始！ 因此，请求32 PT字体的用户实际上在Windows上请求32 PX和43 PX。 但这些数字仍然可以看到。 为什么高度称为“EM尺寸”？ 因为字母“M”巧合的正方形，“M”宽度==字符件高度== EM尺寸。 简单的！ 但是，在数字类型中，“EM Square”是（我引用维基百科）： 任意分辨率的网格，用作数字字体的设计空间。 意思是，如果我打开Fira代码并绘制EM广场，它根本不会与任何东西保持一致：

长话短说，这个广场是在设置字体大小时实际控制的。如果将字体大小设置为32 pt，则此广场将是32/43 px高/宽。太糟糕了，它是不可见的，字体中没有元素匹配。

当我说EM尺寸绝对是任意的，并且根本没有与字体中的任何东西有关，它并不夸张。它实际上不是！

这意味着以相同大小设置的不同字体可能具有急剧不同的感知大小。例如，如果我从两个不同的字体上对齐EM方块（==设置相同的字体大小），我会得到非常不同的“m”高度：

不可预测：你不能猜到你会得到什么。 16 pt意味着多少像素，究竟是多少？

不实用：你无法得到你想要的东西。想要字母为13 px tank？不能这样做。

依赖的操作系统。在不同的操作系统上打开文档时，获取不同的渲染。无法在MacOS和Windows之间共享编辑器配置。

帽是人眼实际上偏心的是文本块边界。因此，控制该规模，而不是其他任意选定的指标是有意义的：

对我来说，后者给出了更好的一致性。 例如，在Cascadia和Consolas看。 或黑客和IBM Plex Mono。 或Ubuntu Mono和Victor Mono（最后两个）。 我们在它的同时，让我们解决线路高度呢？ 别担心，我会很快。 为什么？ 行高的问题是它是由相同的抽象字符边界计算： 本公约在金属类型中感觉到。 毕竟，你不能比字母的正文更短： 但它在数字印刷术中没有意义！ 与字体大小相同，字母上方和下方的空空间量绝对是任意的。 有些人给它很多额外的空间。 其他人分配足以适合升天和下降者： 即使是后者，它仍然不是我们想要的！ Ascenders和Descenders是异常值，不会影响感知的文本框。 从技术上讲，当然，最小的线路高度应该在没有交叉点的情况下既不适合它们，而是在美学上，它远非最好的选择。

随着字体设计人员在定义字符边界的自由的情况下，试图获得一致的线路高度是猜测游戏。

该怎么办？合理的方式是直接以像素直接设置线路高度，忽略任何字体度量标准。也许作为盖帽高度的百分比，但绝对不是字体大小或“自动”线高度！

另一个重要点：切勿将行高视为线之间的间隙（金属类型引导）。否则，两种不同的字体大小将分解段落段：

此外，我认为没有理由尊重所谓的“默认线高”。它基本上是一个字体设计师的个人偏好，在每个观看条件下对字体的每个用户都施加。它可以是任何数字（通常是）！但200％的盖帽高度始终是200％。

总结：这是我们现在拥有的。更改字体并获取随机线高度：

这就是我想要的：改变字体，但所有线路都完全住在哪里：

认为与所有这些计算机都有字体，我们仍然困扰着来自字体的金属时代的许多怪癖。

我试图通过这些提议实现的是一个非常简单的用例： 每次执行此操作时，我都不需要从头开始重新配置字体大小和线路高度。 第二种用例也很简单：我想要一种可预测和可靠的方式来在按钮中居中文本。 网络上一直是一个问题，但最近麦克斯也捕获了这种疾病： 鉴于您无法始终控制哪些字体将用于呈现您的网页，缺乏对准文本的工具可靠似乎是一种监督。 进入图形的线高的底部。 Figma冒险在寻找人们想要的妥协以及网络实际上的损害。 深度潜水CSS：字体指标，线路高度和垂直对齐。 一个优秀的文章，说明了字体和CSS线高度算法有效的工作原理。 还有：看，我不是唯一一个网站上有可怕背景颜色的人:)

倾覆。 一个JS库，可让您完成本文中所描述的，今天在Web的范围内完成。 领导修剪：数字排版的未来。 领导 - 修剪（〜帽尺寸）会让每个人的生活简化。 我还创建开源的东西：Fira代码，anybar，dataScript和rum。 如果您喜欢我所做的并希望早日访问我的文章（以及其他好处），您应该支持我的帕勒顿。