網(wǎng)頁字體單位介紹

本文主要介紹在編寫網(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浆西。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市顽腾,隨后出現(xiàn)的幾起案子近零,更是在濱河造成了極大的恐慌,老刑警劉巖抄肖,帶你破解...
    沈念sama閱讀 211,376評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件久信,死亡現(xiàn)場離奇詭異,居然都是意外死亡漓摩,警方通過查閱死者的電腦和手機裙士,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,126評論 2 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來管毙,“玉大人腿椎,你說我怎么就攤上這事桌硫。” “怎么了啃炸?”我有些...
    開封第一講書人閱讀 156,966評論 0 347
  • 文/不壞的土叔 我叫張陵铆隘,是天一觀的道長。 經(jīng)常有香客問我南用,道長膀钠,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,432評論 1 283
  • 正文 為了忘掉前任裹虫,我火速辦了婚禮肿嘲,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘筑公。我一直安慰自己雳窟,他們只是感情好,可當我...
    茶點故事閱讀 65,519評論 6 385
  • 文/花漫 我一把揭開白布十酣。 她就那樣靜靜地躺著涩拙,像睡著了一般。 火紅的嫁衣襯著肌膚如雪耸采。 梳的紋絲不亂的頭發(fā)上兴泥,一...
    開封第一講書人閱讀 49,792評論 1 290
  • 那天,我揣著相機與錄音虾宇,去河邊找鬼搓彻。 笑死,一個胖子當著我的面吹牛嘱朽,可吹牛的內(nèi)容都是我干的旭贬。 我是一名探鬼主播,決...
    沈念sama閱讀 38,933評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼搪泳,長吁一口氣:“原來是場噩夢啊……” “哼稀轨!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起岸军,我...
    開封第一講書人閱讀 37,701評論 0 266
  • 序言:老撾萬榮一對情侶失蹤奋刽,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后艰赞,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體佣谐,經(jīng)...
    沈念sama閱讀 44,143評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,488評論 2 327
  • 正文 我和宋清朗相戀三年方妖,在試婚紗的時候發(fā)現(xiàn)自己被綠了狭魂。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,626評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖雌澄,靈堂內(nèi)的尸體忽然破棺而出斋泄,到底是詐尸還是另有隱情,我是刑警寧澤掷伙,帶...
    沈念sama閱讀 34,292評論 4 329
  • 正文 年R本政府宣布是己,位于F島的核電站,受9級特大地震影響任柜,放射性物質(zhì)發(fā)生泄漏卒废。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,896評論 3 313
  • 文/蒙蒙 一宙地、第九天 我趴在偏房一處隱蔽的房頂上張望摔认。 院中可真熱鬧,春花似錦宅粥、人聲如沸参袱。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,742評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽抹蚀。三九已至,卻和暖如春企垦,著一層夾襖步出監(jiān)牢的瞬間环壤,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評論 1 265
  • 我被黑心中介騙來泰國打工钞诡, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留郑现,地道東北人。 一個月前我還...
    沈念sama閱讀 46,324評論 2 360
  • 正文 我出身青樓荧降,卻偏偏與公主長得像接箫,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子朵诫,可洞房花燭夜當晚...
    茶點故事閱讀 43,494評論 2 348

推薦閱讀更多精彩內(nèi)容