在android和ios文本垂直alignment问题

我已经做了一个网站,所有的文字是在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; } 

有谁可能知道文字在平板电脑上没有正确alignment的原因。

以下是桌面浏览器右侧alignment的截图 在这里输入图像说明

这是平板电脑浏览器的问题的屏幕截图 在这里输入图像说明

在桌面上,FF和Chrome都能正常工作,但是在Android平板电脑上,它与Chrome浏览器上的Chrome浏览器错误alignment,而且在ios Safari浏览器上也不能正常工作。 这是链接:

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

希望有人会帮助理解这个问题,并build议最好的解决scheme。

谢谢。

Solutions Collecting From Web of "在android和ios文本垂直alignment问题"

遇到了类似的问题。 看起来是导致问题的自定义字体。 尝试用通用的(如Sans-serif)replace自定义字体。 不确定如何使用导致问题的相同的自定义字体来解决问题。

你有没有尝试使用“垂直alignment”的CSS属性? 试试这个 。