摘要：前言本文主要探索在安卓系统下浏览器中小字号中文居中的实现以及在混排时的对齐处理。神奇的安卓字体根据所述，文字中从小到大可以划出三个区域，分别是，和。但是，部分安卓机器字体的字形不居中于，却居中于。
前言
本文主要探索在安卓系统下浏览器中小字号中文居中的实现以及在混排时的对齐处理。本文是受《Deep dive CSS: font metrics, line-height and vertical-align》(以下简称为《Deep》)所启发，并以此为基础所写，建议先阅读前文，您也可以选择阅读大漠老师或方应杭老师的翻译版。大漠版 方应杭版
一直以来前端最简单的文字垂直居中方式就是line-height=height,浏览器会自动将line-height大于font-size的部分平分在文字上下，实现居中效果。但是，当网页中存在中文特别是10-12px的小字号中文时，在部分安卓机器上出现字符上飘，甚至超出容器的情况。
对于这种现象，网上流传着多种解决方案，比如tabel-cell法，flex法等。但是这类方法总是时灵时不灵，原因就在于这类方法只解决了将line-box相对外层容器居中的问题，必须要配合line-height:normal实现文字在line-box内居中才能解决问题。下文将对line-height:normal的生效原理和副作用处理进行研究。
根据《Deep》所述，文字中从小到大可以划出三个区域，分别是em-square，content-area和virtual-area。一般情况下，前一个区域大致居中与后一个区域，而文字本身也大致居中于这个区域。因此无论是采用哪种line-height,文字居中于line-box看起来都是一件理所当然的事。
但是，对于部分安卓系统的默认字体而言却不是这样。
下图的两个字的font-size和height都是10px，左边一个line-height为1即等于font-size，右边一个则为normal(由于DPR的原因，这里看到的像素点是实际上的三倍)。由于line-height属性不同。左边的line-box大小等于ex-square，右边的line-box大小等于virtual-area=content-area+line-gap
下图左侧红框内的淡灰色区域为em-square，高10px，深灰色区域为content-area高11px，右侧红框内的淡灰色区域为virtual-area高14px。可以看出，此时em-square位于content-area底部，字形则位于content-area顶部，所以字形完全没有居中于ex-square。
而右侧的行为则与《Deep》所述不同，virtual-area相对content-area多出来的3px大小的line-gap并不是平均分配与上下，而是全部堆在了顶部。因此恰好看起来文字居中于virtual-area。
综上，line-height:normal可以使文字在那些奇怪的安卓机器上实现垂直居中。当然，这条样式会带来一个问题，即高度line-box的高度不可控，此时就需要前文所说的flex或tabel-cell将line-box
相对于外层容器居中，然后在外层容器设置高度即可。
下面是使用实例，起作用的样式是display: flex;align-items: center两条。创建一个弹性容器，然后将该容器的子元素居中，这样virtual-area多出来的部分就溢出到边框之外，而不会影响布局了。
图中红框内的浅灰色区域为高度12px的容器，深灰色为高度16px的line-box和virtual-area。最终实现了将12px大小的文字居中于12px大小的容器中的目的。
国
总结
回顾我们以前的做法。我们通常会为line-height设置一个具体的高度该高度就是line-box的高度。而浏览器会将字体的em-square居中于line-box中。对于大多数正常字体这么操作就可以实现垂直居中。
但是，部分安卓机器字体的字形不居中于em-square，却居中于virtual-area。此时通过line-height:normal样式使得virtual-area撑满line-box。从而实现文字居中于line-box。最后通过固定外层容器大小然后居中line-box的方式，消除前面的样式造成的line-box大小不可控的副作用。
PS:这种方案应用于多行文本的时，无法手动控制行间距，只能使用字体设计师决定的默认行间距。在需要手动控制行间距时，还是建议放弃此方案，反正对于多行文本，1~2px的偏移对整体视觉展现不会有太大的影响
。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112655.html
摘要：内联元素的外边缘与该行高的顶部和底部边缘对齐。如果行高小于字体的高度，不会受影响，但会对齐文本边界。红线表示边界，蓝线表示，黄色为，白色为区域，绿色为区域。的确定规则元素的是它的第一行的。 前言 为什么写这篇总结？最近在文字图标垂直对齐上用到css的vertical-align属性，但是有的时候有效，有的时候无效，常常疑惑不解，反思这是自己对vertical-align的基本认知不够造...
摘要：接下来说句听起来很奇怪的话一个内联元素有两个高度高度和实际区域高度是我自己发明的单词，它表示对人类有效的高度，你在其他地方是看不到这个单词的。你没看错，是计算的一些细节对于内联元素，和会增大区域，但是不会增大不是的高度。 本文为饥人谷讲师方方原创文章，首发于 前端学习指南。 这是一篇译文，对 inline 和 inline-block 的元素剖析非常给力。 原文：Deep dive C...
摘要：经常我们在浏览器上调试的好好的，但是到了移动端就会有各种奇特的适配问题最经常遇见莫过于中文字稍微偏上了。为什么中文本偏上文本都会有一个内容区域，这个区域就是我们选中文本时展示的区域。 在日常工作中，经常会遇到图片+文字+背景色的设计稿实现。经常我们在Chrome浏览器上调试的好好的，但是到了移动端就会有各种奇特的适配问题——最经常遇见莫过于Android中文字稍微偏上了。在iOS和An...
摘要：经常我们在浏览器上调试的好好的，但是到了移动端就会有各种奇特的适配问题最经常遇见莫过于中文字稍微偏上了。为什么中文本偏上文本都会有一个内容区域，这个区域就是我们选中文本时展示的区域。 在日常工作中，经常会遇到图片+文字+背景色的设计稿实现。经常我们在Chrome浏览器上调试的好好的，但是到了移动端就会有各种奇特的适配问题——最经常遇见莫过于Android中文字稍微偏上了。在iOS和An...
阅读 2397·2021-11-23 09:51
阅读 1208·2021-11-22 13:54
阅读 3419·2021-09-24 10:31
阅读 1062·2021-08-16 10:46
阅读 3617·2019-08-30 15:54
阅读 699·2019-08-30 15:54
阅读 2884·2019-08-29 17:17
阅读 3152·2019-08-29 15:08
