CSS字體單位

GeekQiaQia 發布于2019-08-28 18:23 / 424人閱讀

摘要：所以，在網頁字體中，使用和單位是更好的解決方案。一般來說，我在開始寫網頁的時候，會設置標簽的字體大小為這樣標簽就是百分比的單位，然后再網頁接下來使用單位。

一、前言

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

PS: 半年前只翻譯啦一半，半夜打開一看原文突然就想把剩下的翻譯啦~里面有一些自己的觀點描述，如果有錯誤請您留言給我，一定修正。

二、合適的單位

"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）

3. chrome v30中的效果

(由于這里不涉及字體設計的講解，設置了內邊距等樣式便于比較，但是不影響差異的判斷)

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

4. em與百分比的比較

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

從例子1-1中，我們可以看出，我們用了“font-size: 100%“來作為我們的基本單位（作用在body標簽上）。如果你改變上面代碼中基本單位的font-size: 100%為font-size: 1em（body { font-size: 1em; }），你可能不容易發現改變前后的不同之處。讓我們看看改變成em單位后，在改變瀏覽器文本大小的設置后在一些瀏覽器上的效果。（文章中作者只說了存在于某些瀏覽器中，我就測試了一下chrome和ie6/7/8/9/10，發現只有ie6會出現作者描述的不清晰和不一致的效果），效果如下圖所示：（測試代碼位于文章末尾：例子1-2）

在IE6中的設置地方如下，設置中，字體大小為中的時候渲染效果比較好。

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

5. 作者觀點

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

得出結論：贏家是“百分比”。(大家不忙噴哈，后面作者更新了現在流行的網頁字體設置方式)

6. 作者在2011年1月的補充

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

px現在被認為是能夠被接受的字體大小單位（使用它做單位，用戶可以使用瀏覽器的“放大”功能來讀取較小的文字），不過這樣做會出一些問題，當在具有非常高密度屏幕的移動設備中（比如一些Android和iPhone設備上擁有每英寸200~300像素以上，讓網頁中11px和12px的字體不太擁有良好的閱讀體驗！）。因此，我將繼續使用百分比作為在Web文檔中的基本字體大小。

7. 附錄

例子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 {
    font-size: 100%;
}
#test1, #test2 {
    float: left;
    border: 1px solid #ccc;
    padding: 10px;
}
/* container style */
#test1 {
    font-size: 100%;
}
#test2 {
    margin-left: 50px;
    font-size: 120%;
}
/* text underline */
p {
    border-bottom: 1px solid #aaa;
}
/* main style */
/* font-size: 100% */
#test1 .p1 {
    font-size: 1em;
}
#test1 .p2 {
    font-size: 12pt;
}
#test1 .p3 {
    font-size: 16px;
}
#test1 .p4 {
    font-size: 100%;
}
/* font-size: 120% */
#test2 .p11 {
    font-size: 1em;
}
#test2 .p12 {
    font-size: 12pt;
}
#test2 .p13 {
    font-size: 16px;
}
#test2 .p14 {
    font-size: 100%;
}

例子1-2：em與百分比測試中的代碼，放在文章最后，以便大家能夠更順暢的閱讀下來。

（1）HTML代碼：


    font-size: 1em
    1em: The quick brown fox.


    font-size: 100%
    100%: The quick brown fox.

（2）CSS代碼：

/* base style */
body {
    font-size: 1em;
}
#test1, #test2 {
    float: left;
    border: 1px solid #ccc;
    padding: 10px;
}
/* container style */
#test1 {

}
#test2 {
    margin-left: 50px;
}
/* text underline */
p {
    border-bottom: 1px solid #aaa;
}
/* main style */
#test1 .p {
    font-size: 1em;
}
#test2 .p {
    font-size: 100%;
}

作者文章的評論也比較精彩，能夠學習到更多 ^0^

英文原文作者：http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

云服務器 GPU云服務器字體單位字體單位 html css字體庫 css 服務器字體

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/111211.html

CSS單位：px、em、rem

摘要：在平時的工作當中，我發現自己大多數時候是用來作為字體單位的，不僅如此，其實公司的所有前端項目都是以作為字體單位的。我們知道像素作為相對長度單位是相對于顯示器的分辨率而言的。很好地解決了的字體大小從父元素繼承所帶來的不便。 px 在平時的工作當中，我發現自己大多數時候是用px來作為CSS字體單位的，不僅如此，其實公司的所有前端項目都是以px作為CSS字體單位的。我們知道px（像素）作為C...

Lucky_Boy 2019-08-29 12:22 評論0 收藏0
關于CSS中的字體尺寸設置

摘要：常用單位在中可以用很多不同的方式來設定字體的尺寸。當你為一個元素添加單位時，應當考慮到所有父元素的字體尺寸。例寬度是中新提出的一個單位，通過寬度來計算字體尺寸。個人翻譯，轉載請注明出處英文原文：CSS Font Sizing 寫在前面上一篇文章如何做好移動端的響應式設計：Viewport控制討論到了CSS像素，于是我決定研究一下如何用不同的方式來在CSS中設定字體...

mcterry 2019-08-28 18:09 評論0 收藏0
聊一聊CSS中的長度單位

摘要：有的是日常生活中使用的單位，比如厘米和英寸有的是印刷行業使用的單位，比如和有的是專門為發明的單位，比如。但是，由于目前低端打印機的每英寸點數為，而高端屏幕的每英寸點數為，因此所謂的高分辨率可能介于兩者之間。。 CSS中有很多屬性可以接受長度值，比如： width, height, margin, padding, border-width, font-size, text-shadow...

史占廣 2019-08-30 15:55 評論0 收藏0
CSS：7個你可能不認識的單位

摘要：原文譯文個你可能不知道的單位譯者眾所周知，當使用技術的時候，很容被一些奇異問題給困住。今天，我就介紹一些你之前可能不知道的屬性，是一些例如和測量方面的單位，但是很有可能你之前都沒聽過這些。然而，對于每一個問題，百分比并不是最好的解決方案。原文：7 CSS Units You Might Not Know About 譯文：7個你可能不知道的CSS單位譯者：dwqs 眾所周知，...

peixn 2019-08-28 18:02 評論0 收藏0
CSS 單位

摘要：概覽中的長度單位有很多，覺得有必要整理備忘。單位大體分為兩大類絕對單位，不會因為其他元素的尺寸變化而變化。如果想使用顯示窗口的寬度或高度而不是父元素的寬度將會怎么樣這正是和單位所提供的。和現代瀏覽器都支持這兩個單位。概覽 CSS中的長度單位有很多，覺得有必要整理備忘。網上介紹的也比較多和全，詳見參考資料。單位大體分為兩大類：絕對單位，不會因為其他元素的尺寸變化而變化。相對...

ARGUS 2019-08-28 18:23 評論0 收藏0