手机和桌面之间的CSS行高属性差异

我在创建我的网站http://geekket.co/的文本徽标时遇到了这种奇怪的情况。手机和桌面之间的CSS行高属性差异

在桌面浏览器（Firefox 51，Chrome 56，IE 11.576，Edge 38）中，徽标完美工作，它看起来象点完美，正如我们的设计文档指定的那样。

但是在移动设备中，行高属性似乎工作不正确。 Opera很好，但Firefox和Chrome不能按预期工作。

手机截图imgur专辑，因为我还没有足够的声誉：http://imgur.com/a/Ij3cF

这是专门为标志的特定部分的CSS代码：

#LogoGeek { 
    display: inline-block; 
    background-color: rgb(90, 186, 71); 
    font-family: "ForcedSquare"; 
    font-size: 90px; 
    line-height: .72; 
    height: .74em; 
    padding: 0 .05em 0 .12em; 
    vertical-align: middle; 
}

“ForcedSquare”是Web字体，我们添加到该网站。

我在移动Chrome浏览器中使用了Remote Dev Tools功能，发现如果将line-height更改为.87，它可以按预期工作，但是，我觉得这是一个可笑的修复方法。

据我所看，这似乎是某种问题与特定的字体。但是为什么没有与桌面和/或Opera Mobile的所有不同浏览器打交道，我不得不想。

有没有更好的方法来调整它，或使其在所有浏览器中正常工作？谢谢大家！

来源

2017-02-26 Tamh

我知道这种情况的两种解决方案。首先，您可以使用填充而不是行高。其次，你只使用一种字体格式。您必须使用TTF，OTF，WOFF等所有格式。你可以在w3school页面阅读更多内容。 Link for W3schools.com

来源

2017-02-26 17:55:28

感谢您的洞察。我尝试过使用所有的字体文件格式，但它也不起作用，实时页面现在使用CSS文件中的所有格式。此外，尝试删除行高，它完全混淆了一致性，因为它使上边框更大。另外，我正在使用填充来保持背景的一致性。 – Tamh

@tamh如果你使用SVG代替Font，会发生什么？ –

手机和桌面之间的CSS行高属性差异

回答

相关问题