Question

在尝试为我的网站http://geekket.co/创建文字徽标时，我遇到了这种奇怪的情况。

在桌面浏览器（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;
}

＆＃34; ForcedSquare＆＃34;是我们添加到网站的网络字体。

我摆弄了移动浏览器中的远程开发工具功能，发现如果我将行高改为.87，它会按预期工作，但我觉得这是一个荒谬的修复。

据我所知，特定字体似乎存在某种问题。但是，为什么没有与桌面和/或Opera Mobile的所有不同浏览器达成协议，我不得不提出想法。

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

Answer 1

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

移动设备和桌面设备之间的CSS行高属性差异

1 个答案: