クラスのフォント サイズを、たとえば継承されたフォント サイズの 70% に指定する方法はありますか?
ボタンに適切な境界線や背景などを設定する一般的な「ボタン」クラスがあります。フォント サイズがかなり小さい場所やフォント サイズがかなり大きい場所など、複数の場所で使用します。
<div style="font-size: 26px;">
Push this: <input class="button" type="submit" value="Go">
</div>
<div style="font-size: 10px;">
Push this too: <input class="button" type="submit" value="Go">
</div>
どちらの場合も、ボタンの font-size を、ボタンがあるスパンまたは div のフォント サイズの約 70% にしたいと思います。
純粋なCSSでこれを行うことはできますか?
基本フォント サイズが常に 1em であり、.7em がその 70% になるという点で、EM はパーセンテージのように機能します (同様に、1.2em は基本フォント サイズの 120% に相当します)。これが適切に機能するためには、ドキュメントの本文にベース フォント サイズを定義する必要があります。実験の結果、font-size: 77%; であることがわかりました。すべてのブラウザーで適切な基本サイズを提供します (つまり、1em を「通常の」読み取り可能なサイズでレンダリングします)。使用するフォント ファミリに応じて、75% から 80% の間の他の値を試してください。また、相対的なフォント サイズは累積的に継承されることに注意してください。たとえば、次のようになります。
<style>
small { font-size: .8em; }
span.tiny { font-size: .8em }
</style>
<small>This text is 80% of base size where as
<span class="tiny">this text is 80% of 80% (or 64%) of base size</span>
</small>
これは、ボタン クラスに .7em のフォント サイズを指定するだけで目的を達成できるため、有利に機能します (ボタンのフォント サイズは常に親オブジェクトの 70% になります)。ハッピーコーディング！
2014 編集:
Root EM ユニットのブラウザー サポートが非常に優れていることを指摘する価値があります*。まだ使用していない場合は、検討する価値があります。ルート EM (rem) はルート (ドキュメント) のフォント サイズに関連付けられており、「通常の」EM とは異なり、ネストの影響を受けません。常にルート フォント サイズに関連しています。はほとんどemのテキストのサイズ変更に非常に役立ちますが、ネストを考慮しているremため、はマージンやパディングなど、ネストでサイズを変更したくない場合に最適です (これは、左マージンの位置ずれの一般的な原因です)。 、ただし、ルートフォント サイズと一緒にサイズを変更したい (通常はメディア クエリを使用)。html
EM と REM の詳細については、Design Shack を参照してください。
*) IE8 は、それをサポートしていない唯一の一般的なブラウザー (~5%) です。IE8 をサポートする必要がある場合は、宣言の前にピクセル単位で同等のサイズを含めるだけです。rem
CSS では、相対単位を指定すると、デフォルトで継承元のサイズに相対します。つまり、ボタンのフォントサイズを「70%」と定義するだけで済みます。
また、フォント サイズに便利な相対的な単位として、em と ex が 2 つあります。1 em は文字「M」の幅、1 ex は文字「x」の高さです。これも明らかに継承されています。
例のように、フォントサイズとして px を使用しないでください。px は画面の DPI に従いません。たとえば、私の画面では、 10px と 26pxの両方が小さくなります。代わりに「pt」を使用するか、「em」で始める必要があります。
<input style="font-size: 70%" class="button" type="submit" value="Go">
?