2

3.5em / 56px Arial: クロム | ファイアフォックス、IE、クローム

3.5em: http://jsfiddle.net/yst9h/

html, body {
    font-family:Arial, Helvetica, Sans-Serif;
}
.loadingText {
    font-weight:bold;
    font-variant:small-caps;
    font-size:3.5em;
}

56px: http://jsfiddle.net/yst9h/1/

    ...
    font-size:56px;
    ...

その下にバーがある要素と、そのような読み込み中のテキストがあります。Chrome では、テキストはバーの上にきれいに収まり、親の 100% と読み込み中のテキスト シェア (幅 200px) のサイズになります。ただし、Firefox と IE では、フォントがはるかに大きく (!)、バーを越えて送信され、結果として位置がずれて見えます。ブラウザのすべての開発ツールは、フォントが正しいサイズであると報告し（明らかに人間の目には見えない場合）、どのブラウザにもズームレベルが設定されていません（さまざまなズームレベルもテストされ、スケーリングの違いに変化はありません)

これは私を非常に困惑させました。私が見逃したものを探して、関連するフォントの不一致の問題をすべて読んで、SOとグーグルを何度も読んできましたが、まだこれに出くわしていません。

これは簡単に修正できるものですか、それともフォント サイズを小さくするためにブラウザごとの CSS ルールと格闘する必要がありますか?

4

3 に答える 3

1

あなたが見ているものは本物です。Chrome は例外的なケースだと考えたいのですが、それは私です。

簡単な修正はありません。最善の方法は、特定のテキストが占めるスペースについて推測しないことです。

複数の行を必要とするテキストの場合、line-heightプロパティを使用して一定の規則性を得ることができます。

テキストの小さなチャンクに対してピクセル パーフェクトなレンダリングが必要な場合は、画像が最適です。

于 2013-09-07T19:06:30.863 に答える
1

に問題があるようですfont-variant: small-caps;

このフィドルのように削除すると、W7 で Fx、Chr、および IE8 と一貫したレンダリングが行われます。
テストでそれを確認した場合 (私は徹底的にテストしませんでした)、テキストを小さいフォントサイズでレンダリングし、(の助けを借りずにfont-variant:small-caps;)強制的に大文字にし、次のように使用することをお勧めします:first-letter:

.loadingText {
    font-size: 2.5em; /* example, something less than 3.5em. Equiv. 40px */
    text-transform: uppercase;
}
.loadingText:first-letter {
    font-size: 3.5em;
}

この広く使用されているプロパティを使用しても、テキストのレンダリングは、さまざまな OS やブラウザーでピクセル パーフェクトであることを意図していないため、幅が異なります (たとえば、すべての Linux ディストリビューションに Arial があるわけではなく、おそらくほとんどないでしょう。アンチエイリアスは OS であり、ユーザーの選択、OS X は Windows とは異なるレンダリングを行います。Windows のバージョンやモバイルでは異なります...まあ :)

于 2013-09-07T19:54:27.290 に答える
0

2 つのオプションがあります。

  1. テキストのサイズを小さくします。
  2. コンテナのサイズを大きくします。

の幅を削除して.loadingTextを設定するとtext-align: center;、ほぼ完了です。

テキストとローディング バーの幅を等しく設定する必要があります (そのため、テキストの幅を削除する必要があります)。見栄えを良くするために、テキストを中央に配置することをお勧めします。

ここにあなたのオプションがあります。

  1. フォント修正
  2. 幅修正
于 2013-09-07T20:20:40.847 に答える