0

我的网站在 IE、Chrome 和 Firefox 上看起来完全一样，但在 Safari 和 Opera 上存在问题。现在特别是在歌剧中的问题是所有字体都是像素化的并且非常可怕。在 Safari 中，问题几乎相同，但似乎较大的文本有效，而较小的文本几乎不可读。

我使用 Html5 文档类型并且：

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

很难解释，但这是我制作的字体代码：

@font-face {
    font-family:'modern';
    src:url('../fonts/modern.eot');
    src:url('../fonts/modern.eot?#iefix') format('embedded-opentype'),
        url('../fonts/modern.woff') format('woff'),
        url('../fonts/modern.ttf') format('truetype'),
        url('../fonts/modern.svg#modern') format('svg');
    font-weight:normal;
    font-style:normal;

}

现在这里是“菜单”文本 css，它在 Opera 和 Firefox 中显示非常糟糕：

height:80px;
width:200px;
border-radius:45px 45px 0 0;
-moz-border-radius:50px;
-webkit-border-radius:50px 50px 50px 50px;
-o-border-radius:50px 50px 50px 50px;
border-top:2px solid #000;
transition:all 1s;
moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
color:#a0a0a0;
display:block;
font-family:modern;
font-size:23px;
font-weight:700;
letter-spacing:1px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
line-height:70px;
background:url(../images/menu_plate.png) no-repeat;
opacity:0.7;
}

这里还有另一部分。这个在 Safari 中显示相当正常，但在 chrome 中显示不正常。

h2,h3 {
border-bottom:1px dashed #d2d2d2;
color:#b4b4b4;
font-family:modern;
font-size:50px;
font-weight:400;
line-height:1.2em;
margin-bottom:15px;
text-align:left;
padding:25px 0 5px;
}

现在我尝试将 font-face 字体粗细更改为 400 或 700。没有任何效果。尝试删除类的字体粗细值。没有什么。实际上，正如您所看到的，我的代码非常有效，但我就是不知道出了什么问题。

4

1 回答 1

0

尝试使用-webkit-font-smoothing. 此外，尝试通过 Font Squirrel 运行您的字体。

如果您使用的是 Mac，您还可以尝试完全禁用字体平滑（系统偏好设置 > 常规 > 可用时使用 LCD 字体平滑 [取消选中]）。请务必在更改此设置后重新启动浏览器以使其应用。如果这是问题所在，我会尝试使用 Font Squirrel 之类的东西重新生成字体文件。与我拥有的桌面字体转换工具相比，它对我的​​字体有很大帮助。我已将此错误提交给 Apple，他们回复说这是“预期行为”，这让我大吃一惊。

于 2013-03-22T22:50:14.983 回答