我目前正在使用自定义字体，并且在移动设备上存在渲染问题。经过一些研究，这似乎是字体本身的一个基线问题。
这是代码，第一个按钮是自定义字体，第二个是arial:
<div>
ITC Franklin Gothic Demi Compressed->
<button style="padding:0 !important; margin: 0 !important;">start</button>
<button style="padding:0 !important; margin: 0 !important; font-family: arial;">start</button>
<- arial
</div>
我去掉了所有的填充和边距，这在chrome桌面上可以按预期渲染。
Chrome-桌面
但我的安卓手机上的Chrome没有。
Chrome-移动(桌面(
正如你所看到的，在移动设备上的自定义字体上有一些填充。
可能是什么问题？
作为最后的手段，我可以使用CSS媒体查询对它们进行不同的样式设置。我对这种方法的担忧是具有更高分辨率的设备，这可能会触发桌面样式并恢复到原始问题。
如有任何帮助，我们将不胜感激。
我无法根据个人经验回答这个问题，但一个快速的谷歌给了我这个论坛的问答。该解决方案围绕着线高度属性的使用展开。
https://www.sitepoint.com/community/t/desktop-vs-tablet-android-chrome-big-line-height-difference-i-think-related-to-high-density-screens/247286
我发现了问题。发送给我的字体不是网络字体。一旦应用了网络字体，它们就会在不同的设备上一致地呈现。