2015年11月9日月曜日

CSS | フォントサイズ px,em,% 対応表【インターネット研究会Z】

引用元(勉強の為に引用しました。):
http://www.interz.jp/html/em.html


(i)
 
■ 様々な文字の大きさ
□px
文字サイズのピクセル指定です。dpi・画素数、液晶モニターの粒の大きさでの指定ですね。簡単に指定できデザインもし易いので初心者向から幅広く使用できます。ただ環境(解像度)によって大きさが変わりデザインが崩れるのが欠点です。

□em
デザインのプロの人が好んで使っています。emは倍率での指定となります。1.5emの場合は基本値から1.5倍というサイズになります。これは初期設定で10px=1emになるように設定で調整しなければなりません。IEでは拡大縮小できませんがそれ以外のブラウザなら出来ます
余談ですがemは元々文字間隔を空けるタグです。1emで1文字の間隔が開きます。

□%
emはIEでバグがあるので嫌いという方が%指定で使っています。
emはデジカメのズームのように「×1.2倍」と表記しますが 、%は「120%」と表記します。その違いです。しかし下の表を見てのように1%程の誤差があったりブラウザにより差が出ますので絶対的な物でもありません。


□pxとemと%は置き換えられる
emは倍率で1.0em=10pxとします。1.2em=1.2倍、10px*1.2em=12px
font-size: 62.5% = font-size: 12em = font-size: font-size: 10px
よって10px使いたい場合は62.5%でも平気です。

CSS3での設定例 
html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */
coliss
http://coliss.com/

■ px em % 対応表
□環境によって誤差が出る
液晶の解像度やブラウザの種類などで誤差が出るために絶対的ではありません。いくつかの表を見ましたが若干値が違いますが、下の海外サイトが一番正確なようです。

E-riverstyle Desig
Web デザイナー&クリエイターのためのWebデザイン用フリー素材
http://www.e-riverstyle.com/ 
PixelsEMsPercent
8px0.50em50%
9px0.56em56%
10px0.63em62%
11px0.69em68%
12px0.75em75%
13px0.81em81%
14px0.88em87%
15px0.94em93%
16px1.00em100%
17px1.06em106%
18px1.13em112%
19px1.19em118%
20px1.25em125%
21px1.31em131%
22px1.38em137%
23px1.44em143%
24px1.50em150%
25px1.56em156%
26px1.63em162%
27px1.69em168%
28px1.75em175%
29px1.81em181%
30px1.88em187%
31px1.94em193%
32px2.00em200%

PXtoEM.com PX to EMconversion made simple.
http://pxtoem.com/
PixelsEMsPercentPoints
6px0.37em37.5%5pt
7px0.438em43.8%5pt
8px0.5em50%6pt
9px0.563em56.3%7pt
10px0.625em62.5%8pt
11px0.688em68.8%8pt
12px0.75em75%9pt
13px0.813em81.3%10pt
14px0.875em87.5%11pt
15px0.938em93.8%11pt
16px1em100%12pt
17px1.063em106.3%13pt
18px1.125em112.5%14pt
19px1.188em118.8%14pt
20px1.25em125%15pt
21px1.313em131.3%16pt
22px1.375em137.5%17pt
23px1.438em143.8%17pt
24px1.5em150%18pt

(2011年11月13日記載)




0 コメント:

コメントを投稿