CSSで現在のテキストサイズを取得するには

Question

私はこれらの文字列を3pxほど増やすことができるすべての文字列についてCSSを記述しています。

.increaseSize { 
getSize()+3px; 
} 

誰もが私を助けることができる：私はどのように私はこれを行うことができますが、私はこのような何かを考えてわからないのですか？

Answer 1

私は、はるかに簡単なアプローチを模索します。

p.myText { 
 
    font-size: 16px; 
 
} 
 

 
.increaseSize { 
 
    font-size: 1.5em 
 
}

<p class="myText">This is some standard text and <span class="increaseSize">this is a bigger font size text</span></p>

これは、親よりも50％も大きい任意の.increaseSize要素のフォントサイズになるだろう。

calc（）を使用できますが、おそらくbrowser compatibilityが問題になります。これはより安全な解決策です。

これは役に立ちますか？

Answer 2

次の例のようにそれを使用することができます：

div { 
 
    font-size: 1em; 
 
} 
 
span.increase { 
 
    font-size: calc(100% + 3px); 
 
}

<div> 
 
    Hello <span class="increase">World</span> 
 
</div>

を%ユニットを使用すると、要素の実際のフォントサイズを取得することができます。現在、calc（browser compatibility）を使用して、font-sizeに3pxを追加できます。

応答性の高いウェブデザインの場合は、font-sizeを自分で計算しないでください。応答性の高いfont-sizeを達成するには、em,remまたは%のような相対単位を使用する必要があります。

Answer 3

W3C

ユーザーが（ブラウザメニューの）テキストのサイズを変更できるようにするにはエム でフォントサイズを設定する

でお奨めのように、多くの開発者が代わりにピクセルのEMを使用しています。

emサイズ単位は、W3Cによって推奨されています。

1emは現在のフォントサイズと同じです。ブラウザのデフォルトのテキストサイズは> 16ピクセルです。したがって、1emのデフォルトサイズは16pxです。

サイズは次の式を使用して画素から全角に計算することができます。ここでは、画素/ 16 = EM

は、いくつかの例

h1 { 
font-size: 2.5em; /* 40px/16=2.5em */ 
} 

h2 { 
font-size: 1.875em; /* 30px/16=1.875em */ 
} 

p { 
font-size: 0.875em; /* 14px/16=0.875em */ 
}