Question

我创建了一个网站，其中所有文字都适用于安卓平板电脑和手机中的某些像素，与桌面相比。

想复制一个小例子。

这是我的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;
}

可能有人知道文本在平板电脑上没有正确对齐的原因。

以下是桌面浏览器上右对齐的屏幕截图 enter image description here

这是平板电脑浏览器上的问题截图 enter image description here

在桌面上，这在FF和Chrome中都能正常工作，但在Android平板电脑上，它与Chrome浏览器上的错误对齐，也不适用于ios Safari浏览器。这是链接：

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

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

感谢。

Answer 1

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

Answer 2

您是否尝试过使用“vertical-align”css属性？试试this。

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

2 个答案: