Question

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

我使用Html5 doctype和：

<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.没有任何作用。尝试删除类的字体粗细值。没有。实际上你可以看到我的代码非常有效，但我无法弄清楚出了什么问题。

Answer 1

尝试使用-webkit-font-smoothing。另外，尝试通过Font Squirrel运行字体。

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

Opera / Safari以不寻常的像素化方式显示我的自定义字体（Font Face）。

1 个答案: