.otf 在某些浏览器中无法正确呈现答案

【问题标题】：.otf won't render properly in some browsers.otf 在某些浏览器中无法正确呈现
【发布时间】：2013-08-27 07:44:43
【问题描述】：

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

@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;
}

问题是在 google chrome 中它呈现得非常糟糕：

但在 Firefox 中效果很好：

我做错了吗？

【问题讨论】：

标签： css google-chrome fonts rendering

【解决方案1】：

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

或者试试这个 chrome -webkit-font-smoothing: antialiased;

【讨论】：

【解决方案2】：

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

【讨论】：

您好，我不知道您是什么意思...我尝试从这里下载它：fontsquirrel.com/fonts/Surface?q=SURFACE 但链接已损坏...您知道吗？
链接是固定的，但与您要执行的操作无关。您必须将字体从 OTF 转换为带有提示的 TTF。去这里：fontsquirrel.com/tools/webfont-generator

【解决方案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;
}

让它在其他浏览器中也能工作

当然，bold.otf 文件必须包含在使用的路径中

【讨论】：