.otf在某些浏览器中无法正常呈现

Question

我下载了this font

这就是我将它包含在样式表中的方式：

@font-face {
    font-family: "surface";
    src: url(fonts/Surface-Medium.otf);
}

这就是我使用它的方式：

#site-header .site-logo a {
  color: #00B1ED;
  font-family: "surface";
  font-size: 40px;
  font-weight: bold;
  letter-spacing: -1.5px;
  text-shadow: 0 1px 5px #000000;
  text-transform: capitalize;
}
#site-header .site-logo a span {
    color: white;

}
#site-header .site-logo a span:last-child {
  font-size: 22px;
}

问题是在谷歌浏览器中，它渲染得非常糟糕：

但是在firefox中效果很好：

我做错了吗？

Answer 1

将字体转换为嵌入式Open Type（.eot），并为其他浏览器支持添加.woff。 它在浏览器中正确呈现。

或者尝试使用chrome -webkit-font-smoothing: antialiased;

Answer 2

大多数Windows浏览器只会呈现具有任何平滑度的 TrueType 字体。 OpenType（CFF）通常无法使用Windows呈现引擎很好地呈现。不仅如此，这些TrueType字体必须包含提示数据，告诉Windows如何以小尺寸放置像素。考虑通过Font Squirrel Generator运行OTF，为您提供所需的所有字体格式以及正确的CSS代码。

Answer 3

这里的问题是我包含了普通的样式字体，然后实现了粗体

出于某种原因，它在firefox中工作，所以它在其他方面失败是有道理的，但是这个：

@font-face {
    font-family: "surface";
    src: url(fonts/Surface-Medium.otf);
    font-style: normal;
}
@font-face {
    font-family: "surface";
    src: url(fonts/Surface_Bold.otf);
    font-style: bold;
}

也可以在其他浏览器中使用

对于corse，bold.otf文件必须包含在使用的路径

中