CSSでのフォントサイズの浮動小数点値はどのようにしてブラウザ間でレンダリングされますか？

Question

CSS emは素晴らしいツールですが、私はいつもそれらを完全に理解していないので、おそらく私を悩ますものがあります。

フォントはすべてのサイズで均等に表示されず、不正確な値では特に表示されません。あなたがフォントにem正確なピクセル値を使用して与えたいならば、あなたは（あなたが身体の16pxにフォントサイズを変更していないと仮定した場合）のようなものをしなければならない理由、それは次のとおりです。

font-size: 0.875em; /* 14px */ 
font-size: 1.25em; /* 18px */ 

たぶん、あなたはちょうど欲しかったですサイズを少し増やすことができますが、その後0.9em = 14.4pxを認識し、フォントがぼやけて見える恐れがあります。いずれにしても、font-sizeの段落を1.25em（18px）にして、本文サイズを16pxから14pxに変更すると、段落は17.5pxになります。再びぼやけ！

私たちは、デスクトップのものと同じように1xの一般的なスクリーンを使用しているとします。たとえば、11.5pxフォントはどのようにレンダリングされますか？私はそれらをテスト用のhtmlファイルに出力しました。まるで12pxフォントのように見えます。 これはすべてのブラウザで推奨される動作ですか？そして、emsを使用するとき、フォントサイズによって決まるパディングやマージンのようなサイズはどうですか？彼らはまた切り上げられますか？

EDIT：3市長のブラウザのレンダリングを比較しました。ここでは、次のとおりです。

詳細を確認することが容易になるように、私は、（200％）少しそれをスケールアップ。一番上に、14px（左）と14.4px（右）で同じテキストがどのようにレンダリングされるかを確認できます。以下、Differenceブレンドモードを使用してPhotoshopにオーバーレイして、違いがあるかどうかを確認しました。ご覧のように、Chromeはフォントサイズを四捨五入し、同じサイズでレンダリングします。一方、ボックスの高さは異なります。 Firefoxの高さは同じですが、フォントの高さは同じに見えますが、フォントはx軸で少し異なります。 IEの結果は、一種のミックスです。いずれにしても、14.4pxフォントはまったくかすかに見えないので、私は本当に驚いています。

Answer 1

これはすべてのブラウザで推奨される動作ですか？ここ

Iはw3.org

に見出されるものを参照画素 ある96DPIの画素密度と腕の長さのリーダからの距離にデバイス上の一つの画素の視野角です。したがって、公称アームの長さが28インチの場合、視角は約0.0213度になります。したがって、アームの長さでの読み取りの場合、1pxは約0.26mm（1/96インチ）に相当します。

だから1pxは、必ずしも下の画像を参照して、画面上の1つの画素に対応していない：リテラル1の要素を移動させるために、（上記の画素値を使用して）0.25pxに基づいて計算することができるにもかかわらず、そのため

画面のピクセル、それは行われません。

emsを使用しているときにfont-sizeによって決まるパディングと余白のサイズはどうですか？彼らはまた切り上げられますか？

this questionをチェックしてください。基本的に値は、丸で囲んだです。 11.5pxが12pxと同じように見えたのは、切り上げられたためです。 11.4pxは同じように見えます11px

また、this websiteを見ると、これがどのように動作するかについていくつか興味深い動作を示します。

例の下のコードスニペットを参照してください。 DIVだけtranslateY(0.5px)上の1つのピクセル下に移動します方法を見て、これはブラウザを証明する値を丸め：

.box { 
 
    width: 30px; 
 
    height: 30px; 
 
    background-color: #FF0000; 
 
    display: inline-block; 
 
} 
 
#cont { 
 
    outline: 1px solid #000; 
 
    display: inline-block; 
 
}

<div id="cont"> 
 
    <div class="box" style="transform: translateY(0.1px)"></div> 
 
    <div class="box" style="transform: translateY(0.2px)"></div> 
 
    <div class="box" style="transform: translateY(0.3px)"></div> 
 
    <div class="box" style="transform: translateY(0.4px)"></div> 
 
    <div class="box" style="transform: translateY(0.5px)"></div> 
 
    <div class="box" style="transform: translateY(0.6px)"></div> 
 
    <div class="box" style="transform: translateY(0.7px)"></div> 
 
    <div class="box" style="transform: translateY(0.8px)"></div> 
 
    <div class="box" style="transform: translateY(0.9px)"></div> 
 
    <div class="box" style="transform: translateY(1.0px)"></div> 
 
</div>

Answer 2

それは単純な質問ではありませんし、ブラウザに「正確に」は適用されません。 。 使用されるレンダリングシステム全体と、「連続スペース対離散スペース」または「四角形ボックスを使用してカーブを描く」については、もっと疑問です。

質問についての理解を持つように助けることができるいくつかのテキスト：

（「サブピクセルフォントレンダリング」、または「フォントヒンティング」「離散空間のフォントレンダリング」、Googleの検索設定からの結果を試してみてください）

http://jcgt.org/published/0002/01/04/paper.pdf http://www.cutebugs.net/files/curve/fabris97antialiasing.pdf http://lspwww.epfl.ch/publications/typography/frsa.pdf https://www.grc.com/ctwho.htm

「右」の動作は、ここで定義することは困難であり、そのため「デフォルトの動作は」ほとんど不可能になります。これは、ブラウザーの動作やCSSよりも空間や人間の知覚に関する数学的な疑問です。

...とにかく、 "1ピクセル移動"に関する動作は、ブラウザまたはシステムが使用するフォントヒント技術に関連しています。

Answer 3

これは、これはあなたのdivの値である階層的な方法であなたは、CSSを定義する必要が本当にタフ質問

.box{ 
     font-size: 1em; /* size according to your*/ 

    } 

ではありませんあなたはボックスの内容に別の見出しタグがあるとします。私の場合は

.box h2{font-size:14px; } 

だけのシンプルな

more info