关于安卓下H5渲染文字上浮

举个栗子

正常状况文字是垂直水平居中，即便是阿里这种大厂，在webapp端，H5页面也存在安卓渲染文字上浮的状况。

那要怎么解决这种状况？

方案

1.设置默认字体+UED设计约束

@font-face {  font-weight: normal;  font-style: normal;  font-family: 'DINPro-Medium';  src: url('../../../assets/font/DINPro-Medium.ttf') format('truetype');}
body,html{  font-family:DINPro-Medium;}复制代码

给H5工程设置默认字体，UED团队在设计阶段就尽可能减小低于12px的元件设计（低于12px会致使文字上浮）。

2.transfrom+transform-origin

.content {
    display: inline-block;
    height: 40px;
    background-color: gray;
    line-height: 40px;
    font-size: 20px;
    transform: scale(0.5);
    transform-origin: 0% 0%;
}复制代码

将元件属性放大2倍，在使用scale进行缩放，亲测有效并也在业务中使用到，可是这种方式也有缺点：元件属性放大2倍，因此占据页面空间也扩大了2倍，所以适用性并很差。

3.table布局

看了不少相关文章，有人说能够完美解决，可是测试后并非这样

.coinBox{  display: table;  margin-left: 0.3rem;  .coinNum{    color: #fff; height: 0.26rem; font-size: 12px; display: table-cell; vertical-align: middle; }}复制代码

.coinBox{  display: table;  margin-left: 0.3rem;  .coinNum{    color: #fff; height: 0.26rem; font-size: 10px; display: table-cell; vertical-align: middle; }}复制代码

result: 只是修改了font-size为10px，就致使渲染 ”领100金币“ 文字上浮。

4.flex

.getCoinButton{  width: 0.93rem;  height: 0.26rem;  background-image: linear-gradient(-90deg, #FF3411 11%, #FF7859 89%); border-radius: 100px; position: absolute; right: 0.16rem; top: 50%; transform: translate(0,-50%); display: flex; align-items: center; justify-content: center; .coinButtonHead{ width: 0.14rem; height: 0.14rem; } .coinNum{ font-size: 12px; color: #fff; margin-left: 0.04rem; }}复制代码

.getCoinButton{  width: 0.93rem;  height: 0.26rem;  background-image: linear-gradient(-90deg, #FF3411 11%, #FF7859 89%); border-radius: 100px; position: absolute; right: 0.16rem; top: 50%; transform: translate(0,-50%); display: flex; align-items: center; justify-content: center; .coinButtonHead{ width: 0.14rem; height: 0.14rem; } .coinNum{ font-size: 9px; color: #fff; margin-left: 0.04rem; }}复制代码

只是修改了font-size为9px，就致使渲染 ”领50金币“ 文字上浮。

结论

1.低于12px实现垂直水平居中，在安卓上仍是像小强同样顽强很难解决。

2.设置默认字体是比较通用的处理方式, 搭配table、flex灵活布局（处理>=12px的场景）。

3.须要前端+UED推行设计约束来从根本解决。

ps：有大佬能提供好的解决方案请赐教～感谢🙏

参考文章：

IMweb社区：imweb.io/topic/5848d…

知乎：www.zhihu.com/question/39…