css - 特定のクラスを追加してテキストを動的に大きくする

Question

テキストを動的に大きくする方法はありますか? 次の例を見てください。

* {
    font-size:1em;
}

.large {
    font-size:1.4em;
}

h1 {
    font-size:2.3em;
}

h1問題は、ラージ クラスよりもベース フォント サイズが大きい のような要素にラージ クラスを追加すると、サイズが小さくなることです。emsに基づいて特定の割合でスケーリングするようにする方法はありますか? 私はすでにパーセントを試しました。

Answer 1

em とパーセンテージはどちらも相対的なサイズですが、親要素のサイズに依存して子要素のサイズを決定することに注意してください。それ自体の 1.4 倍の大きさのものを作ることはできません。

任意の要素をその親よりも相対的に大きくすることができるため、(純粋な HTML と CSS を使用して) 最善の策は、フォント サイズを大きくしたい要素の内部コンテンツを、largeクラスを追加できるタグでラップすることです。上で指定しました。

注: ここで実際にやろうとしているのは、要素内の匿名テキスト ノードを対象にしてスタイルを設定することのようです。最初の行のテキストを大きくスタイルするようなものを使用できますが.large::first-line、テキストノード全体をスタイルしないため、それが解決策であるとは言えません。