css文字行高是多少,深入了解CSS字体度量，行高和vertical-align（二）

Python部落(python.freelycode.com)组织翻译，禁止转载，欢迎转发。

CSS 无所不能

我们已经讨论过了line-height和vertical-align在一起是如何工作，但现在的问题是如何使用CSS来控制字度的度量指标？简洁回答：没有。即使真的如此，我也想我们应该可以做些什么？那么有关于字体度量，我们应该能够做些什么？

例如，如果我们想要给文本使用Catamaran字体，可以把其大写字母高度扩展到100px？通过一些数学计算，似乎可行。

首先设置度量字体的五个自定义属性，然后计算font-size，从而得到大写字母高度是100px。

大写字母高度现在是100px高

很简单，不是吗？但如果我们想要让文本在可视区居中，让剩余的空间均分在"B"字的顶部和底部，应该怎么做呢？为了达到这一目的，我们必须基于ascender和descender比例计算出vertical-align。

首先，计算line-height:normal和内容区域的高度。

然后，我们需要：从大写字母的底部到底部边缘的距离

从大写字母的顶部到顶部边缘的距离

像这样：

我们现在可以通过距离乘以font-size计算出vertical-align。

最后，我们设定所需的line-height和计算它，保持一个垂直对齐：

大写字母高度现在是100px高

很简单，不是吗？但如果我们想要让文本在可视区居中，让剩余的空间均分在"B"字的顶部和底部，应该怎么做呢？为了达到这一目的，我们必须基于ascender和descender比例计算出vertical-align。

首先，计算line-height:normal和内容区域的高度。

然后，我们需要从大写字母的底部到底部边缘的距离

从大写字母的顶部到顶部边缘的距离

像这样：

我们现在可以通过距离乘以font-size计算出vertical-align。

最后，我们设置所需的line-height并计算它，同时保持垂直对齐：

具有不同行高文本依然在中间

添加一个图标和字母"B"垂直对齐，现在很容易就能做到：

图标和B字母等高

源码效果请点击这里。

注意：这个测试只是出于演示目的。你不能依赖于此。如果字体不加载，备用字全有可能具有不同的字体度量参数，它就没法正常工作了。在一部分示例中，大家看到很有以--开头的，这是CSS的原始变量，也称之为CSS自定义属性。如果在此之前你从未接触过这方面的内容，建议你先点击这里进行了解。

总结

这篇文章我们学到了什么：行内格式化上下文真的很难理解

所有行内元素都有两个高度内容区域(content-area)基于字体的度量参数

虚拟区域(virtual-area)就是line-height

这两个高度是无法可视的(如果你通过开发者工具，你可以看到)

line-height:normal是基于字体度量参数

line-height: n有可能创建一个虚拟区域比内容区域更小

vertical-align不是很可靠

一个line-box的高度计算是基于它的子元素的line-height和vertical-align属性

我们没有办法直接通过CSS来获取或设置字体的度量参数

未来可能会有一个垂直对齐的规范来解决这些看似问题的问题：Line Grid Module

资源

如果你喜欢这篇文章，请

英文原文：http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align

译者：winston