android和ios中的文本垂直对齐问题

Posted 2023-03-05

技术标签:

【中文标题】android和ios中的文本垂直对齐问题【英文标题】：Text vertical alignment issue in android and ios 【发布时间】：2014-02-14 01:32:58 【问题描述】：

我创建了一个网站，与桌面相比，android 平板电脑和移动设备中的所有文本都适用于某些像素。

想复制一个小例子。

这是我的 html 代码：

<body>
      <h3>MAKING OF</h3>
</body>

这是css代码：

body 
    text-align: center;
    padding-top: 50px;

html 
    font-size: 62.5%;

@font-face 
    font-family: MPL;
    src: local("MPL"),
    url(fonts/MPL.ttf),
    url(fonts/MPL.eot);

h3 
    font-family: MPL;
    font-size: 30px;
    font-size: 3rem;
    height: 60px;
    line-height: 60px;
    padding: 0px 12px;
    background-color: #5496F2;
    color: #000;

谁知道文字在平板电脑上没有正确对齐的原因。

这是桌面浏览器右对齐的屏幕截图

这是平板电脑浏览器上的问题截图

在桌面上，这在 FF 和 Chrome 中都可以正常工作，但在 android 平板电脑上，它在 Chrome 和 FF 浏览器上的对齐方式是错误的，而且它在 ios Safari 浏览器上也不能正常工作。这是链接：

http://inants.com/kadmos/web/kad/a/a

希望有人能帮助理解这个问题并提出最佳解决方案。

谢谢。

【问题讨论】：

【参考方案1】：

遇到过类似的问题。看起来是导致问题的自定义字体。尝试用诸如 Sans-serif 之类的通用字体替换自定义字体。尚不确定如何使用导致问题的相同自定义字体来解决问题。

【讨论】：

【参考方案2】：