0

私のサイトは 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;

}

ここで、opera と firefox で非常に悪い表示をする「メニュー」テキスト css を次に示します。

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。また、FontSquirrelを使用してフォントを実行してみてください。

Macを使用している場合は、フォントスムージングを完全に無効にすることもできます（[システム環境設定]>[一般]>[利用可能な場合はLCDフォントスムージングを使用する[チェックを外す]）。この設定を変更して適用した後は、必ずブラウザを再起動してください。これが問題であることが判明した場合は、FontSquirrelなどを使用してフォントファイルを再生成してみます。私が持っているデスクトップフォント変換ツールと比較して、それは私のフォントを大いに助けてくれました。私はこのバグをAppleに提出しましたが、彼らはそれが「意図された振る舞い」であると答え、それは私の心を驚かせました。

于 2013-03-22T22:50:14.983 に答える