本文主要介紹在編寫網(wǎng)頁中可能會用到的字體單位
網(wǎng)頁中定義字體時可能會用到的字體單位:px某饰、em儒恋、%善绎、rem、pt诫尽、vm禀酱、vh 等。
1. 字體單位
1.1 px
px是pixel縮寫牧嫉,是基于像素的單位(屏幕上顯示數(shù)據(jù)的最基本的點)剂跟。用像素定義的的文字、圖片等會隨屏幕的分辨率變化而變化酣藻。如果在定義字體大小時曹洽,使用px作為單位,分辨率調(diào)高辽剧,實際看到的文字就變“小”送淆。
1.2 em
em是一個相對長度單位,最初是指字母M的寬度怕轿,故名em⊥当溃現(xiàn)指的是字符寬度的倍數(shù),用法類似百分比撞羽,如:0.8em环凿,1.2em,2em等放吩。通常1em=16px(一般瀏覽器默認的字體大小為16px)。
注:當用于指定字體大小時羽杰,em單位是指父元素的字體大小
1.3 %
百分與“em”類似渡紫,1em=100%。當前的字體大小等于100%,字體大小也是受父類影響考赛。
1.4 rem
rem是CSS3新增的一個相對長度單位惕澎,只相對根目錄即HTML元素。所以可以在html標簽上設(shè)置字體大小為標準颜骤,文檔中的字體大小都會以此為參照唧喉。
如:
html{font-size:62.5%; /* 10÷16=62.5% */}body{font-size:12px;font-size:1.2rem ; }p{font-size:14px;font-size:1.4rem;}
兼容性:IE9+,F(xiàn)irefox忍抽、Chrome八孝、Safari、Opera 的主流版本都支持鸠项,為了兼容不支持 rem 的瀏覽器干跛,我們需要在 rem 前面寫上對應的 px 值,這樣不支持的瀏覽器可以優(yōu)雅降級祟绊。
1.5 pt
PT是point(磅)縮寫楼入,是一種固定長度的度量單位,大小為1/72英寸(96dpi)哥捕。如果在web上使用pt做單位的文字,字體的大小在不同屏幕下一樣(DPI精度一樣)嘉熊,但在Word中使用pt相當方便遥赚。因為使用Word主要目的都不是為了屏幕瀏覽,而是輸出打印阐肤。當打印到實體時凫佛,pt作為一個自然長度單位就方便實用了。
pt 相關(guān)公式:1in = 2.54cm = 25.4 mm = 72pt = 6pcpx = pt * DPI / 72(一般電腦屏幕的打印精度是96dpi)
注:用在屏幕瀏覽(屏幕效果)時泽腮,pt和px都會隨屏幕分辨率的變化而變化御蒲。用在打印(打印效果)時诊赊,使用pt在不同的屏幕分辨率或不同的DPI精度時顯示大小一樣厚满,只是DPI精度越高的越清晰。
1.6 vw / vh
vw 相對于視區(qū)的寬度:視區(qū)寬度是100vw碧磅。
vh 相對于視區(qū)的高度:視區(qū)寬度是100vh碘箍。
注:視區(qū)”所指為瀏覽器內(nèi)部的可視區(qū)域大小,即window.innerWidth/window.innerHeight大小鲸郊,不包含任務欄標題欄以及底部工具欄的瀏覽器區(qū)域大小丰榴。部分瀏覽器可能不支持該度量單位。
1.7 其它字體單位
1.in:英寸秆撮;
2.cm:厘米四濒;
3.mm:毫米;
4.pc:pica职辨,大約12pt盗蟆,1/6英寸;
5.ex:取當前作用效果的字體的x的高度,在無法確定x高度的情況下以0.5em計算(部分瀏覽器支持,用的較少就不詳述了)鲁猩;
6.ch:以節(jié)點所使用字體中的“0”(零)字符為基準,找不到時為0.5em(部分瀏覽器支持仆邓,用的較少就不詳述了);
2. 字體單位使用建議
1.在網(wǎng)頁開發(fā)時建議使用px伴鳖、rem节值、em字體單位,一般瀏覽器默認字體大小是16px黎侈,可以先讓根元素html為10px察署,如:html{font-size:62.5%;},然后使用em,或rem來設(shè)置個標簽元素的字體大芯骸贴汪;
2.如果是需要打印的文檔就需要使用pt來作為字體單位脐往,實際的打印字體清晰度會根據(jù)DPI/PPI(打印精度)變化。
3. 相關(guān)詞匯
3.1 屏幕分辨率
屏幕分辨率是指屏幕顯示的分辨率扳埂。顯示分辨率就是屏幕上顯示的像素個數(shù)业簿,分辨率160×128的意思是水平方向含有像素數(shù)為160個,垂直方向像素數(shù)128個阳懂。屏幕尺寸一樣的情況下梅尤,分辨率越高,顯示效果就越精細和細膩岩调。
3.2 DPI/PPI pixel(dot)per inch
DPI即每英寸點數(shù)巷燥,是一個量度單位,用于點陣數(shù)碼影像号枕,指每一英寸長度中缰揪,取樣、可顯示或輸出點的數(shù)目葱淳。DPI是打印機钝腺、鼠標等設(shè)備分辨率的度量單位。是衡量打印機打印精度的主要參數(shù)之一赞厕,一般來說艳狐,DPI值越高,表明打印機的打印精度越高皿桑。
如果一臺打印機的分辨率是4800×1200dpi毫目,那么意味著在X方向(橫向)上,兩個墨點最近的距離可以達到1/4800英寸诲侮;在Y方向(縱向)上蒜茴,兩個墨點的距離可以達到1/1200英寸。
注:PPI類同DPI浆西。