CSS 字體單位em簡(jiǎn)介
發(fā)布時(shí)間：2009-12-27 16:37:33 作者：佚名 
我要評(píng)論
我要評(píng)論國(guó)外人士非常重視網(wǎng)站的易用性，相當(dāng)一部分外國(guó)站點(diǎn)已經(jīng)使用em作為字體單位.
剛學(xué)網(wǎng)頁(yè)制作的時(shí)候，老師曾經(jīng)告訴我必須用CSS強(qiáng)制定義字體大小，否則保證每個(gè)人都看到一致的效果。這一點(diǎn)在現(xiàn)在的中國(guó)站點(diǎn)尤為明顯。包括網(wǎng)易、搜狐這些門戶網(wǎng)站在內(nèi)的大部分站點(diǎn)，用的都是絕對(duì)單位px（像素）。但是，如果從網(wǎng)站易用性方面考慮，字體大小應(yīng)該是可變的，一些視力不是那么好的人需要放大字體才能看得清頁(yè)面內(nèi)容。然而，占據(jù)大部分瀏覽器市場(chǎng)的IE無(wú)法調(diào)整那些使用px作為單位的字體大小。國(guó)外人士非常重視網(wǎng)站的易用性，相當(dāng)一部分外國(guó)站點(diǎn)已經(jīng)使用em作為字體單位。
1em指的是一個(gè)字體的大小，它會(huì)繼承父級(jí)元素的字體大小，因此并不是一個(gè)固定的值。任何瀏覽器的默認(rèn)字體大小都是16px。因此，12px = 0.75em。實(shí)際應(yīng)用中為了方便換算，通常會(huì)如下設(shè)置樣式：
html { font-size: 62.5%; }
這樣，1em = 10px。我們常用的1.2em理論上就是12px。但是，這個(gè)換算在IE瀏覽器下不成立，1.2em會(huì)比12px稍大一些，解決辦法是把html標(biāo)簽樣式中的62.5%改成63%，即：
html { font-size: 63%; }
在中文的文章中，一般會(huì)在段首空兩格。如果用px作為單位，對(duì)12px字體來(lái)說(shuō)需要空出24px，對(duì)14px字體來(lái)說(shuō)需要空出28px……這樣換算非常不通用。如果用上em單位，這個(gè)問(wèn)題就很好解決了，1個(gè)字的大小就是1em，那兩個(gè)字的大小就是2em。因此，只需這樣定義就行了：
p { text-indent: 2em; }
1em指的是一個(gè)字體的大小，它會(huì)繼承父級(jí)元素的字體大小，因此并不是一個(gè)固定的值。任何瀏覽器的默認(rèn)字體大小都是16px。因此，12px = 0.75em。實(shí)際應(yīng)用中為了方便換算，通常會(huì)如下設(shè)置樣式：
html { font-size: 62.5%; }
這樣，1em = 10px。我們常用的1.2em理論上就是12px。但是，這個(gè)換算在IE瀏覽器下不成立，1.2em會(huì)比12px稍大一些，解決辦法是把html標(biāo)簽樣式中的62.5%改成63%，即：
html { font-size: 63%; }
在中文的文章中，一般會(huì)在段首空兩格。如果用px作為單位，對(duì)12px字體來(lái)說(shuō)需要空出24px，對(duì)14px字體來(lái)說(shuō)需要空出28px……這樣換算非常不通用。如果用上em單位，這個(gè)問(wèn)題就很好解決了，1個(gè)字的大小就是1em，那兩個(gè)字的大小就是2em。因此，只需這樣定義就行了：
p { text-indent: 2em; }
相關(guān)文章
通過(guò)CSS3的object-fit來(lái)調(diào)整圖片適配尺寸的技巧簡(jiǎn)介
這篇文章主要介紹了通過(guò)CSS3的object-fit來(lái)調(diào)整圖片適配尺寸的技巧,包括用object-fit來(lái)居中并裁剪圖片的方法,需要的朋友可以參考下2016-02-27CSS計(jì)數(shù)器counter()的用法簡(jiǎn)介
這篇文章主要介紹了CSS計(jì)數(shù)器counter()的用法,是CSS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-09-26- 這篇文章主要介紹了CSS中的偽元素,是CSS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-08-01
- 這篇文章主要介紹了CSS中的各種選擇符,是CSS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-07-17
- 這篇文章主要介紹了Markdown.css樣式,用來(lái)實(shí)現(xiàn)顯示強(qiáng)大的Markdown樣式的文本,需要的朋友可以參考下2015-07-16
- CSS里一直有一個(gè)讓我們頭疼的問(wèn)題，就是創(chuàng)建布局很麻煩。當(dāng)然，有很多方式，有很多技術(shù)都可以創(chuàng)建各種布局，但我們總覺(jué)得CSS里應(yīng)該提供一些新屬性，讓我們能更好的管理布局2014-05-03
定義css設(shè)備類型-Media Queries圖表簡(jiǎn)介及使用方法
CSS3完美地解決了讓同一個(gè)網(wǎng)站同時(shí)適應(yīng)完全不同尺寸的屏幕這些問(wèn)題;css3提出的MediaQueries解決了為網(wǎng)站設(shè)計(jì)不同的CSS樣式文件，如打印樣式表文件，手機(jī)樣式文件，電腦樣式2013-01-21css3背景圖片透明疊加屬性cross-fade簡(jiǎn)介及用法實(shí)例
據(jù)說(shuō)iOS6系統(tǒng)(iPhone5)增加了兩個(gè)CSS3屬性，一個(gè)是CSS3 filters – CSS3濾鏡另外一個(gè)是CSS3 Cross-fade – CSS3交叉淡入淡出,接下來(lái)為您介紹cross-fade屬性，感興趣的朋友2013-01-08- 本文主要介紹了通用的css hack2012-07-11
網(wǎng)頁(yè)設(shè)計(jì)中的CSS Sprites技術(shù)介紹及其優(yōu)化方法
CSS Sprites 技術(shù)對(duì)于廣大的前端工程師來(lái)說(shuō)應(yīng)該是一點(diǎn)也不陌生。這個(gè)被國(guó)內(nèi)開發(fā)者昵稱為CSS精靈 CSS雪碧的家伙到底解決了什么問(wèn)題，我們又怎樣合理使用這個(gè)技術(shù)呢?下面讓我2012-05-31