移动浏览器上的奇怪行高

Question

我有以下问题。 在移动浏览器上，字体（加载@ font-face）的行高似乎有一个奇怪的偏移量。它似乎向顶部移动了一点点。

我发现它是字体。当我加载Open Sans时，例如......没问题。

@ font-face loaded font（Rubrik）：
http://s12.postimg.org/gnre9viod/Rubrik.png

打开Sans：
http://s27.postimg.org/s4jgc6zyb/Open_Sans.png

看看't / m 6 maart 2016'的小灰色文字 它转移到了顶部。

我试过了：

• 使用fontsquirrel修复/自动垂直指标
• 重新加载原始字体并使用不同的生成器生成网络字体

我有以下CSS：

body {
   height: 100%;
   width: 100%;
   font-family: $typenormal;
   font-weight: normal;
   font-size: 18px;

   @media(max-width: 991px) {
       font-size: 14px;
   }

   line-height: 1.5;
   color: #111;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
}

我正在加载：

• EOT
• eot / IEfix
• WOFF
• woff2
• TTF
• SVG

不起作用。除了使用Open Sans之外还有其他想法吗？

Answer 1

尝试使用SVG而不是其他类型的字体。 （编辑@ font-face）

由于Rubrik字体没有，您可能需要在下面的链接中将.otf转换为.svg。

https://onlinefontconverter.com/