ios和android下数字没有垂直居中,手机端设置小号字体的上下居中问题

问题描述

如下图所示，需要在手机端实现一个上下居中的价格标签，字号 10。

图0

但对于小于 12 号的字体浏览器默认不会显示更小，因为浏览器默认会有个最小的字体大小，在 pc 端通常这个值是 12。

如果非常必要显示更小的字体常规策略会使用 scale 缩放一定的比例来实现，代码如下：

// 缩放字体的样式如下

// 这里的 @rex 是手机端自适应的 rem 单位

font-size: 10 * @rex;

transform-origin: 50% 50%;

transform: scale(0.9);

我们为了兼容多种场景(包含 pc 端)，使用了缩放的方法，部分代码如下：

// dom 结构如下

会员券后价

// 样式如下

.tag{

line-height: 10 * @rex;

padding: 2 * @rex 4 * @rex;

color: #fff;

background-color: #e22929;

border-radius: 10 * @rex;

&-text {

font-size: 10 * @rex;

transform-origin: 50% 50%;