0

私は次のようなCSSを使用しています：

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

html, 
body
{
    line-height: 1;
    margin: 0;
    padding: 0;
    font: 15px Chocolat, Arial, Helvetica, sans-serif;
    color: #000000;
}

ほとんどの場合、ページは IE7、IE8、IE9、および最新バージョンの FireFox と Chrome で正しく表示されます。ページが数回読み込まれるたびに、ページの一部またはすべてに、各文字の間隔がずれている領域があります。2 文字がぎっしり詰まっていて、次の 2 文字に多くの余分なスペースがある場合があります (数ピクセルですが、明らかで醜いです)。私は肯定的ではありませんが、それはIE8でのみ発生していると思います。おそらく互換モードでも発生していません。かなりランダムなので、すぐに確認するのは難しいです。

他の形式を開く方法がありませんが、Windows で TTF 形式を開くと、タイトル領域に「OpenType」と表示されますが、詳細には「OpenType レイアウト、TrueType アウトライン」と表示されます。私はフォントの作成についてほとんど知りません。アーティストからこれを入手し、fontsquirrel.com を使用して他のフォントを作成しました。

別の開発者が推奨しletter-spacingましたが、これは、このランダムな文字間隔モードになった場合ではなく、見栄えが良い場合にのみ役立つようです.

編集：写真を追加しました

サイトをクリックするだけで、ページが次のように読み込まれることがあります (これは互換モードではない IE8 でした)。「Start」という単語を見てください。S と t は非常にタイトです。次に、「What」という単語は、W と h の間にスペースがありすぎます。右側の「受賞」という言葉も、次の画像とは大きく異なって見えます。右側の日付があまりにも見栄えが悪いので、それを可能にする CSS 設定があるとは思いませんでした。それは何と呼ばれますか? make-my-page-awful: true;

文字間隔が悪い

F5 を押してページをリロードするだけで、見栄えがよくなりました。

良い文字間隔

4

1 に答える 1

2

これを変更する：

html, 
body
{
    line-height: 1;
    margin: 0;
    padding: 0;
    font: 15px Chocolat, Arial, Helvetica, sans-serif;
    color: #000000;
}

これに：

html, 
body
{
    line-height: 1;
    margin: 0;
    padding: 0;
    font: 15px Chocolat;
    color: #000000;
}

したがって、 font: 行だけで問題が解決したようです。

おそらく IE8 は、フォールバック フォントの 1 つ (おそらく Arial) を使用して初期レイアウト計算を行い、(悪い方法で) 調整しようとしているに違いないと思います。それが最初のページの読み込みだったらと思いましたが、それはそうではありません。その後、ほぼランダムな時間に発生します。修正を適用する前に、次の手順で毎回再作成できました。

  1. メイン ページを開きます。この時点で、フォントは適切に見えますが、本来よりわずかに小さいかもしれません。

  2. 同じページをリロードするだけのメイン ページのリンクをクリックします (F5 を使用して更新した場合は発生しませんでした)。

-- この時点で、上記の例のように、フォントの見た目が非常に悪くなります。

  1. 同じリンクをもう一度クリック

-- この時点で、フォントは完璧に見えました

ブラウザーを閉じて再度開くか、F5 キーを押して上記の手順を何度も繰り返し、毎回同じ結果を得ることができます。

CSS の 1 行を変更し、再作成できなくなりました。

于 2012-12-12T17:11:58.223 に答える