font-size == line-heightを使用しているにもかかわらず、一部の文字が1行オーバーフローするのはなぜですか？

<div style="height:40px; line-height:40px; width:40px; font-size: 40px; font-family: sans-serif; background-color:rgb(220,220,220)"> 
 
    ⇪ 
 
<div>

Chromeでスニペットランニング、MacOSのシエラ、表示されます。

お知らせ矢印はdiv要素をオーバーフローします。私はそれが決して起こり得ないと思った。どうして？

出典

2017-08-20 MaiaVictor

グリフの高さを定義するのではなく、em-squareの高さを定義するためです。グリフが正方形よりも背が高いフォントでは、そのノーマルです。

すべてのフォントは、正方形のサイズと、上昇と下降を持ちます。グリフは、通常、上昇の上端から降下の底までの距離に収まるが、その距離はしばしばem-squareのサイズよりも大きい。

出典

2017-08-20 23:04:02 Alohci

完了のために：それは任意に大きくすることができますか？グリフがオーバーフローしないことを保証するために使用できる安全な 'font-size/line-height'比はありますか（または少なくとも共通グリフの大部分）？ – MaiaVictor

em-squareサイズは、上昇値と下降値とは完全に独立して設定できます。通常、ブラウザは、デフォルトの線高さとして約1.2〜1.25の比率を使用します。これはほとんどの一般的なフォントで機能しますが、すべてのフォントで動作することが保証される値はありません。 – Alohci

興味があれば[Type-light]（http://www.cr8software.net/typelight.html）は、フォントを実験するためのまともな、無料のツールです。様々な高さの値がどのように作用するかを見ることができるように、さまざまな値で調整することができます。 – Alohci

font-size == line-heightを使用しているにもかかわらず、一部の文字が1行オーバーフローするのはなぜですか？

答えて

関連する問題