12

font-size が異なる 2 行のテキストがあると、それらが重なります。この例を見てください: http://jsfiddle.net/3WcMG/1/

'j' と 'g' はすべて 2 行目の to を隠しています。すべての主要なフォントでそれを行います。

なぜそのように振る舞うのですか？それを避けるにはどうすればよいですか？

編集:「em」の意味を知っています。マージンの使用方法を知っています。行の高さを上げる方法を知っています。JSFiddle のリセット css の効果を知っています。それは私の質問ではありません。私の質問は、「j」の下部がテキストのボックスから外れているのはなぜですか? 2 行目に負の margin-top を配置した場合のように見えます (そうでないことを除いて、デフォルトではそのように見えます)。フォントをボックスに収める方法はありますか。

EDIT2：ブラウザの問題のようです！Mac で chrome 21.0 を使用していますが、次のように表示されます。 スクリーンショット

4

4 に答える 4

20

1em は、フォント サイズのピクセル数の 1 倍に相当します。したがってfont-size、60px の場合、1em = 60px です。14px の場合、1em = 14px などです。を 1em に設定するline-heightと、ピクセル数の 1 倍に等しくなります。

ユーザー エージェントのスタイルシートによって設定されるデフォルトの行の高さは通常 1.5em 前後であるため、混乱が生じる可能性があります。したがって、12pxfont-sizeは 18px になりline-heightます。

em unit
それが使用されている要素の「font-size」プロパティの計算値に等しい

出典: http://www.w3.org/TR/css3-values/#font-relative-lengths
参照: http://www.w3.org/TR/CSS21/syndata.html#length-units

これに基づいて、元の例はまさに私が期待するものです。参考までに、Chrome で表示される内容は次のとおりです。

ここに画像の説明を入力

最初の行の高さは 60 ピクセルですが、2 番目の行の計算値(W3 の項) は 14 ピクセルです (適用されるクラスによって決定されます)。どちらもline-height1em です。したがって、line-heightsそれぞれ 60px と 14px です。これはフォント サイズと同じであるため、2 つの線が接触します (これはフォントによって異なります)。

動作が重複している場合は、別の問題です。

動作を変更するには、別の行の高さ、パディング、マージンなどを使用できます。補足として、rem 単位はより直感的かもしれませんが、古いブラウザーではサポートが不足しています。

CSS ユニットの概要については、http: //css-tricks.com/css-font-size/を参照してください。

ボックスの端にフォントが揃っていない

更新された質問/問題

ここに画像の説明を入力

更新された質問に関しては、http ://www.w3.org/TR/css3-fonts/#propdef-font-sizeを参照してください。

特定のグリフは、EM ボックスの外側ににじむ場合があることに注意してください。

これは、私が試したさまざまなフォントでさまざまな程度で発生しました (X/Y の両方ににじむものもあれば、一方向ににじむものもあれば、まったくにじまないものもあります)。

この動作を変更する方法があるかどうかはわかりません。特に、各ブラウザがアンチエイリアシングに異なるアルゴリズムを使用している可能性があり、文字の端がわずかに変更される可能性があるためです。

関連があると思います line-box-contain: glyphが、編集者のドラフトで言及されているだけで、ブラウザのサポートがない/一貫していないと確信しています.

http://dev.w3.org/csswg/css3-linebox/#line-box-contain

于 2012-08-08T04:46:31.350 に答える
0

デフォルトの行の高さは相対サイズで、たとえば ap のフォント サイズの 150% です。em または % を使用して行の高さを変更すると、ブラウザはそれを「フォント サイズに対する em/%」と解釈します。

http://jsfiddle.net/P7LaP/

<div class="small">
    <p>Normal pq</p><br/>
    <p class="short">Short pq</p><br/>
    <p class="tall">Tall pq</p><br/>
</div>
<div class="normal">
    <p>Normal pq</p><br/>
    <p class="short">Short pq</p><br/>
    <p class="tall">Tall pq</p><br/>
</div>
<div class="large">
    <p>Normal pq</p><br/>
    <p class="short">Short pq</p><br/>
    <p class="tall">Tall pq</p><br/>
</div>

この例には、通常の高さ、短さ、および高さの 3 つの p タグの 3 つのセットがあります。3つのセットはフォントサイズです。

p {
    color: ffffff;
    background: #777777;
}
.short { line-height: 1em; }
.tall { line-height: 2em; }
.small { font-size: 8px; }
.normal { font-size: 16px; }
.large { font-size: 32px; }

これが役立つことを願っています。何をしようとしているのか正確にはわかりませんが、スタイルシートから行の高さの行を削除するだけでよいようです。

于 2014-05-11T14:13:58.070 に答える