浏览器字体渲染不一致答案

【问题标题】：Font rendering inconsistencies in browser浏览器字体渲染不一致
【发布时间】：2019-05-07 05:43:34
【问题描述】：

我目前正在使用自定义字体，但我在移动设备上遇到了渲染问题。经过一番研究，似乎这可能是字体本身的基线问题。

这里是代码，第一个按钮是自定义字体，第二个是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 - Desktop

但不是在我的 Android 手机上的 Chrome 上。

Chrome - Mobile (Desktop)

如您所见，移动设备上的自定义字体有一些填充。

可能是什么问题？

作为最后的手段，我可以使用 CSS 媒体查询为它们设置不同的样式。我对这种方法的担忧是分辨率更高的设备可能会触发桌面样式并恢复到原始问题。

对此的任何帮助将不胜感激。

【问题讨论】：

标签： html css web browser fonts

【解决方案1】：

我无法根据个人经验回答这个问题，但 Google 很快就给了我这个论坛问题和答案。解决方案围绕使用 line-height 属性。

https://www.sitepoint.com/community/t/desktop-vs-tablet-android-chrome-big-line-height-difference-i-think-related-to-high-density-screens/247286

【讨论】：

【解决方案2】：

我发现了问题。发送给我的字体不是网络字体。一旦应用了网络字体，它们就会在不同的设备上一致地呈现。

【讨论】：