CSS字型單位

2021-09-19 16:00:28 字數 3764 閱讀 4450

在css樣式中,當文字縮放的時候使用font-size屬性是最難以理解的方面之一。在css中,你有4種不同的選擇,能夠讓你設定文字在瀏覽器中的展示。那麼這4種單位哪一種更適合呢?這個問題引發了各種各樣不同的爭論和評價。想要找到乙個比較權威的回答可能比較困難,因為這個問題比較難回答。

"ems"(em):"em"是被用於網頁檔案媒介的可縮放的單位(即相對單位)。1em就等於當前字型的大小,舉個例子來講,如果文件中字型的大小為12pt,那麼1em = 12pt。ems擁有能夠縮放的特點,所以2em = 24pt,0.5em = 6pt(你也可以使用原文中的.5em,但是我覺得0.5em的可讀性更好)等等。

pixels(px):畫素是被用於螢幕媒介(在計算機螢幕上讀取)的固定大小的單位(即絕對單位)。1畫素表示電腦螢幕中的1個點(這是你的螢幕能夠識別的最小單位)。在設計網頁的時候,很多web設計者採用畫素,因為它能夠很精確的在瀏覽器中渲染網頁。但是,使用畫素作為單位,當近視的使用者(或者視力不好的使用者)放大正在瀏覽的網頁或者在移動端縮小網頁到合適的尺寸,都會呈現一些問題。

points(pt):points是一直以來被用於列印媒介(列印在紙上等等)。1pt = 1/72英吋。points和pixels比較像,它們都是固定大小和不能縮放的單位。

percent(%):百分比單位和"em"單位很像,但是存在著細微的不同。首先也是最重要的不同,就是在font-size = 100%(比如:12pt = 100%)的時候。當使用百分比單位,你的文字完全能在移動端正常訪問。

當你在實際效果中看它們,能夠很容易理解它們之間的不同點。一般來講,1em = 12pt = 16px = 100%。讓我們看看將基本字型大小(body中字型大小)從100%增加到120%之後,它們有什麼不同。

測試**:(這裡使用設定div中字型大小來做測試,**位於文章末尾:例子1-1)

(由於這裡不涉及字型設計的講解,設定了內邊距等樣式便於比較,但是不影響差異的判斷)

正如你所看到的,em和percent單位當基礎font-size增加的時候,對應的字型大小也相對增加;但是px和pt單位卻沒有反應。對文字設定絕對大小很容易,但對於你的使用者要縮小(或者放大)文字,用於在一些裝置或者機器中正常顯示的時候就不是很好。所以,在網頁字型中,使用em和percent單位是更好的解決方案。

我們發現pt和px字型單位不是適應web文件必須選擇的單位(其實從作者的語氣中並沒有表現出使用px單位不好的意思),我們還有em和百分比作為字型的單位。從理論上來說,em和百分比單位都是相同的(指的都是相對單位),但是在實際的使用中,他們會有細微的不同之處,這些不同之處對於我們在選擇字型單位的時候是比較重要的。

從例子1-1中,我們可以看出,我們用了「font-size: 100%「來作為我們的基本單位(作用在body標籤上)。如果你改變上面**中基本單位的font-size: 100%為font-size: 1em(body ),你可能不容易發現改變前後的不同之處。讓我們看看改變成em單位後,在改變瀏覽器文字大小的設定後在一些瀏覽器上的效果。(文章中作者只說了存在於某些瀏覽器中,我就測試了一下chrome和ie6/7/8/9/10,發現只有ie6會出現作者描述的不清晰和不一致的效果),效果如下圖所示:(測試**位於文章末尾:例子1-2)

在ie6中的設定地方如下,設定中,字型大小為中的時候渲染效果比較好。

當瀏覽器字型大小設定為「中」的時候,em和百分比之間幾乎沒有差異。但是當字型大小改變為其他值得時候差異就比較明顯。當「最小」的情況下:em渲染的字型比百分比的更小;當「最大」的情況下:差異相當的明顯,em渲染的字型比百分比的更大。雖然部分人認為em單位縮放的方式是他們真正想要的,但是在實際的應用中,em文字的縮放是超出預期的,在某些使用者裝置中,「最小」字型大小的情況下會導致字型模糊難以閱讀的情況(其實有點違背網頁可讀性一條吧)。

從理論上講,em單位是在web字型大小領域中即將到來的標準(在我這時候翻譯已經比較流行啦),但是在實際應用中,對於使用者來說,百分比單位能夠提供更多統一的和可被接受的字型渲染。當瀏覽器設定發生改變,百分比單位的伸縮是按照一種可靠比率的方式縮放、放大的,這樣能夠提公升網頁的可讀性,更符合設計師的設計初衷。

當我寫這篇文章幾年後,我想總結一下大家的討論和辯論。一般來說,我在開始寫網頁的時候,會設定body標籤的字型大小為: font-size: 62.5%;這樣body標籤就是百分比的單位,然後再網頁接下來使用em單位。只要body使用的百分比單位設定,你接下就可以任意的選擇em和百分比單位了,這樣做的話會保留百分比單位對於網頁字型渲染的好處。這這幾年裡,這樣的寫法已經成為一種標準。

px現在被認為是能夠被接受的字型大小單位(使用它做單位,使用者可以使用瀏覽器的「放大」功能來讀取較小的文字) ,不過這樣做會出一些問題,當在具有非常高密度螢幕的移動裝置中(比如一些android和iphone裝置上擁有每英吋200~300畫素以上,讓網頁中11px和12px的字型不太擁有良好的閱讀體驗! ) 。因此,我將繼續使用百分比作為在web文件中的基本字型大小。

例子1-1:各種單位在瀏覽器中的表現測試**。

(1)html**:

font-size: 100%

em: the quick brown fox.

pt: the quick brown fox.

px: the quick brown fox.

percent: the quick brown fox.

font-size: 120%

em: the quick brown fox.

pt: the quick brown fox.

px: the quick brown fox.

percent: the quick brown fox.

(2)css**:

/* base style */

body

#test1, #test2

/* container style */

#test1

#test2

/* text underline */

p /* main style */

/* font-size: 100% */

#test1 .p1

#test1 .p2

#test1 .p3

#test1 .p4

/* font-size: 120% */

#test2 .p11

#test2 .p12

#test2 .p13

#test2 .p14

(1)html**:

font-size: 1em

1em: the quick brown fox.

font-size: 100%

100%: the quick brown fox.

(2)css**:

/* base style */

body

#test1, #test2

/* container style */

#test1

#test2

/* text underline */

p /* main style */

#test1 .p

#test2 .p

CSS單位(字型)

px px畫素 pixel 相對長度單位。畫素px是相對於顯示器螢幕解析度而言的。emem是相對長度單位。相對於當前物件內文字的字型尺寸。如當前對行內文字的字型尺寸未被人為設定,則相對於瀏覽器的預設字型尺寸。引自css2.0手冊 任意瀏覽器的預設字型高都是16px。所有未經調整的瀏覽器都符合 1em...

css字型單位

了解 首先先了解四個字型單位 px em pt rem px 單位名稱為畫素,相對長度單位,畫素 px 是相對於顯示器螢幕解析度而言的,國內推薦 em 單位名稱為相對長度單位。相對於當前物件內文字的字型尺寸,國外使用比較多 pt 全稱為point,但中文不叫 點 確切的說法是乙個專用的印刷單位 磅 ...

css字型單位大小

這裡引用的是jorux的 95 的中國 需要重寫css 的文章,題目有點嚇人,但是確實是現在國內網頁製作方面的一些缺陷。我一直也搞不清楚px與em之間的關係和特點,看過以後確實收穫很大。平時都是用px來定義字 體,所以無法用瀏覽器字型放大的功能,而國外大多數 都可以在ie下使用。因為 1.ie無法調...