フォントサイズについていくつか具体的な質問があります。
- pt(IE 12pt)は標準化されていますか?私はどこかでpt=1/72インチを読んだと思います。ただし、photoshopの24ptフォントのサイズは、cssの24ptフォントのサイズとは大幅に異なります。
- フォントサイズは正確に何を決定しますか?それは文字サイズに関する一種の標準化されていない任意の説明ですか、それとも実際に文字の特定の高さまたは幅の属性を参照していますか?
ありがとうスタック!
font-sizeは、フォントのベースラインの高さ(大文字のH文字の高さ)に、その上の少しのスペース(アセンダー)とその下のより大きなスペース(ディセンダー)を加えたものです。
特定のフォントサイズの特定のフォントの場合、ベースラインの高さは常に同じサイズになります。以下は、Arialフォントの測定に基づいたいくつかの例です。
font-size baseline height
10 7
11 8
12 9
14 10
理論的には、CSSの場合、ptはベースラインの高さ(px)の大まかな概算です。たとえば、font-size:9ptのベースラインの高さは9pxで、これはfont-size:12pxに対応します。実際には、ptがベースラインの高さより0.5〜1.0px大きいことに気付くことがあります。
これは、pxとptの大文字のHを並べて比較したjsfiddleです。
私が見たほとんどのPSDでは、12ptとして指定されたフォントは実際には12pxです。ただし、これは異なる場合があります。疑わしい場合は、テキストのベースラインの高さを測定し、それから逆方向にピクセル単位のフォントサイズに変換します。たとえば、大文字のHの高さが9ピクセルの場合、フォントサイズは12ピクセルです。PSDでアンチエイリアスを使用すると、ベースラインの高さを正確に測定することが困難になる場合があります。
通常、CSSでフォントをピクセル単位で測定することをお勧めします。あなたが尋ねた質問のように、ptサイズはかなり恣意的であり、開発者自身の定義によって異なります。
CSS 2.1 (現在の仕様)では、ptは明確に1/72インチです。ただし、現実は異なり、これはCSS3の値と単位のドラフトのセクション5に反映されています。これは、異なる「アンカー単位」を使用した2つのセットアップについて説明しています。ピクセルがアンカー単位である場合、インチ(in
CSS単位として)はインチ(物理単位、2.54 mm)である必要はないため、の意味p
も異なる場合があります。pt
これが、CSSがpt
一部のソフトウェアで一致する必要がない理由の1つです。
フォントサイズは、フォントの基本的なプロパティです。それと文字の寸法との関係はフォントデザイナー次第ですが、フォントデザインはもちろん恣意的ではありません。CSS 2.1仕様では、これはかなり漠然としていますが、(多くの一般的な誤解に対して)定式化は依然として有用です。「フォントサイズは、タイポグラフィで使用される概念であるemsquareに対応しています。特定のグリフは、emの正方形の外側ににじむ可能性があることに注意してください。」(一方、ほとんどのグリフはem正方形のごく一部を使用します。)
フォントの「pt」は印刷CSS専用です。サイズの種類間のすべての違いを説明するリンクは次の とおりですhttp://css-tricks.com/css-font-size/
1)
印刷CSSでは、ptは正確に1/72インチです。
画面cssでは 、すべてがピクセルで定義され、ptは11/3ピクセルとして定義されます。ただし、インチなどの物理的な測定値でこれがどれだけ大きいかは、画面のDPIに依存し、デバイス間で大きく異なります。このため、pt(およびin、cmなどの他の物理的測定値)は画面cssではそれほど有用ではありません。
2)
Font-sizeは、「em-box」の高さを指します。少し簡略化すると、これは、アセンダーとディセンダーを含むフォント内のすべての文字を含むことができる長方形です。もちろん、個々の文字は、em-box全体よりも少ないスペースを占めることがよくあります。たとえば、小文字のxには上下にスペースがあり、小文字のjはem-boxの高さ全体を埋める場合があります。
したがって、フォントサイズは、テキストの行に必要な垂直方向のスペースを示しますが、個々の文字とグリフの寸法は、使用する文字とフォントのデザインに応じて、他の文字と比較して異なります。
さらに、一部のフォントには、emボックスの外側でも拡張(「ブリード」)する文字が含まれている場合があります。これは、フォントの設計者によるスタイル上の選択でもあります。たとえば、文字「Å」は、em-boxの上にブリードすることがよくあります。