2

我下载了这个字体

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

@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 中效果很好：
在此处输入图像描述

我做错了什么吗？

4

3 回答 3

0

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

出于某种原因，它在 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 文件必须包含在使用的路径中

于 2013-08-27T18:55:00.667 回答
0

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

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

于 2013-08-27T07:51:17.883 回答
0

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

于 2013-08-27T12:24:41.397 回答