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