html - フォント サイズは値に影響しません 0.1 ～ 0.4 em

Question

ユーザーが自分でフォントサイズを変更できるようにするコントロールがあります。ただし、サイズの値が 0.1 から 0.4 em の場合、html のフォント サイズは影響しません。Google Chrome バージョン 27.0.1453.110 m を使用しています

HTML

<span class="text_menu_link">Home</span>

CSS

span.text_menu_link {font-size: 0.3em;}

Answer 1

em相対的なフォントサイズです。サンプルを大きな font-size セットを持つ別の div 内に配置すると、0.1 - 0.4em の範囲で変化が見られることに気付くでしょう。これは、妥当な実際のフォント サイズ (ブラウザーの最小値を超える) に評価されるためです。.

HTML

<div class=outer>
<span class="text_menu_link">Home</span>
</div>

CSS

.outer {font-size: 30pt;}
span.text_menu_link {font-size: 0.3em;}

例については、これを参照してください

編集

font-size本体レベルでの設定例

Answer 2

コメントで jsfiddle を介して提供されたサンプル コードから、問題は、効果がないのではなく、「一部のフォント サイズ設定が同じ効果を持つのはなぜですか」のように見えます。

<div>
<span style="font-size: 0.1em;">Home</span>
<span style="font-size: 0.2em;">Home</span>
<span style="font-size: 0.3em;">Home</span>
<span style="font-size: 0.4em;">Home</span>
<span style="font-size: 0.5em;">Home</span>
</div>

これらは、プレーンな「ホーム」の表示と比較するとわかるように、効果があります。多くの場合、同じ効果があります。その理由は、ブラウザーに最小フォント サイズの設定があるためです。

一般的な基本フォント サイズが 16 ピクセル (12 ポイント) の場合、この設定font-size: 0.5emでは 8 ピクセルのサイズが要求されます。これは、通常の最小フォント サイズである 11 ピクセルよりも大きいため、11 ピクセルが使用されます。この例の他の設定についても、結果はもちろん同じです。

Chrome の設定で、最小フォント サイズを 6 ピクセルに変更すると (最小であり、ほとんどの目的には小さすぎる)、最後の「ホーム」が他のものよりも大きくなることに気付くでしょう。現在、リクエストされたサイズは 8 ピクセルですが0.4em、6.4 ピクセルがリクエストされているため、最終結果は、制限のために他のテキストに使用される 6 ピクセルのサイズとほとんど区別できません。その上、Chrome は実際にはここで 6.4 を 6 に丸めているようです (開発者ツールで表示される内容から判断すると)。

加えて、次のように言います。

div { font-size: 120px }

単語のフォント サイズがすべて異なることがわかります。

最後に、diveg のフォント サイズをブラウザの最小フォント サイズと同じに設定すると、font-size設定はまったく効果がありません。