Question

我目前正在使用自定义字体，并且在移动设备上出现渲染问题。经过一些研究，看来这可能是字体本身的基线问题。

这里是代码，第一个按钮是自定义字体，第二个按钮是arial：

$input=trim($input);
if ((substr($input, 0, 1) == '{' && substr($input, -1) == '}') or (substr($input, 0, 1) == '[' && substr($input, -1) == ']')) {
    $output = json_decode($input, 1);
    if (in_array(gettype($output),['object','array'])) {
        #then it's definitely JSON
    }
}

我删除了所有填充和页边距，这些填充和页边距在chrome-台式机上可以正常显示。

Chrome - Desktop

但不能在Android手机上的Chrome上浏览。

Chrome - Mobile (Desktop)

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

可能是什么问题？

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

任何帮助，将不胜感激。

Answer 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

Answer 2

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

浏览器中的字体渲染不一致

2 个答案: