前端开发css文本垂直对不齐解决

朋友问了我一个问题，看似很简单的问题，文本无法垂直对齐。效果如图

样式部分

dom节点

code

解决方案
首先让尝试了

vertical-align: middle;

无效

其次尝试了

display: inline-block:
height: 30px;
line-height: 30px;

无效

然后

display: flex;
align-items: center;

无效

因为未对齐部分是在同一个span节点内 所以没有尝试

// 父元素
font-size: 0;
// 子元素
font-size: 16px;
// 这种方案应该不能解决该问题 只是想到了vertical对齐问题，提一下图片文字对齐问题可以用此方案解决

最后尝试性的改了一下span的font-family 果然是font-family造成的无法对其，随后跟产品沟通可以更换字体，于是改了个font-family解决了

如果不改字体的话 还真没想到什么其他好的方案

谨以此文献给正在开发岗位上奋斗爬坑的有志青年! 共勉