CSS如何定義文字大小以體現(xiàn)用戶(hù)體驗(yàn)_Web標(biāo)準(zhǔn)教程
教程Tag:暫無(wú)Tag,歡迎添加,賺取U幣!
在設(shè)計(jì)網(wǎng)絡(luò)應(yīng)用時(shí),您必須決定如何編輯字體。使用CSS時(shí)存在大量選項(xiàng),每個(gè)開(kāi)發(fā)者都有自己的喜好。本文主要討論字體大小和網(wǎng)絡(luò)應(yīng)用內(nèi)的操作。在開(kāi)發(fā)網(wǎng)絡(luò)應(yīng)用時(shí),沒(méi)有比外觀更重要的事情了。所以,如果發(fā)現(xiàn)設(shè)計(jì)人員十分關(guān)注字體及字體大小,我不會(huì)感到奇怪!
字體大小
CSS2規(guī)范根據(jù)長(zhǎng)度——水平和垂直尺寸——來(lái)定義字體。這個(gè)長(zhǎng)度為一個(gè)數(shù)值,前面可能帶一個(gè)可選的加(+)或減(-)標(biāo)記符。另外,該數(shù)值后可能有一個(gè)可選的單位標(biāo)識(shí)符。
另外,CSS2規(guī)范定義了兩個(gè)單位類(lèi)型:絕對(duì)單位和相對(duì)單位。絕對(duì)值指定單位,而相對(duì)單位指定一個(gè)與另一個(gè)值成比例的值。下面的列表列出了相對(duì)單位標(biāo)識(shí)符:
em:元素字體的高度。它與使用該字體的元素的字體大小屬性計(jì)算值相等。當(dāng)它出現(xiàn)在字體大小屬性值本身中時(shí),會(huì)出現(xiàn)異常,這時(shí)它指母元素的字體大小。
下面是有效的絕對(duì)單位標(biāo)識(shí)符:
測(cè)量絕對(duì)大小的另一種方法是使用衡量一個(gè)值的比例因數(shù),應(yīng)用以下關(guān)鍵字:最小、較小、小、中、大、較大和最小。中為基值,變小就減去一個(gè)因數(shù),變大就增加一個(gè)因數(shù),等等。CSS2規(guī)范定義的比例因數(shù)為1.2,這個(gè)值也可能依瀏覽器而變化。
還可以應(yīng)用百分比值來(lái)格式化文本。百分比值是一個(gè)可選的標(biāo)記符,即數(shù)字后帶有一個(gè)百分比符號(hào)(%)。百分比值總是與另一個(gè)值成比例。就字體而言,它與網(wǎng)頁(yè)的基本字體大小成一定比例。
如您所見(jiàn),有許多方法可完成呈現(xiàn)文本這個(gè)看似簡(jiǎn)單的任務(wù)。下面的HTML格式文本(在段落元素中)應(yīng)用了各種單位標(biāo)識(shí)符。其中所有的值都相等,并假定以72dpi進(jìn)行顯示。
您可以在這個(gè)列表中增加像素值,但它的值要依環(huán)境而定。例如,我的分辨率為1280X1024的手提電腦將顯示與在上表中使用50像素值一致的文本。
仔細(xì)閱讀前面提到的CSS2規(guī)范,可以獲得更多字體大小方面的知識(shí)。現(xiàn)在我將討論如何決定在網(wǎng)絡(luò)應(yīng)用中使用哪種方法。
選擇哪一種方法
在CSS中有許多和字體有關(guān)的選項(xiàng),但哪一種最適合在您的網(wǎng)絡(luò)應(yīng)用中使用呢?絕對(duì)大小有許多缺陷,特別是在一致性、靈活性與訪問(wèn)性方面存在問(wèn)題。與絕對(duì)字體大小相比,任何視力有缺陷的用戶(hù)可使用相對(duì)字體大小來(lái)擴(kuò)大頁(yè)面中的文字,這樣更便于閱讀。因此,開(kāi)發(fā)者經(jīng)常使用相對(duì)大小。
讓我們來(lái)詳細(xì)了解一下相對(duì)大小:
像素是最通用的大小值。多數(shù)瀏覽器都支持它,但也并非總是如此。瀏覽器常常將像素當(dāng)作屏幕像素而非CSS像素來(lái)處理。像素的一個(gè)缺點(diǎn)在于,它忽略或否定用戶(hù)的喜好,且不能在IE中調(diào)整大小。
許多開(kāi)發(fā)者偏愛(ài)用點(diǎn)來(lái)衡量字體大小,但點(diǎn)主要用于桌面印刷系統(tǒng),不方便移植到網(wǎng)絡(luò)中。在呈現(xiàn)文本時(shí),操作系統(tǒng)或?yàn)g覽器默認(rèn)使用像素。
最常用的方法是使用em或百分比大小。EM可在所有支持調(diào)整尺寸的瀏覽器中進(jìn)行調(diào)整。Em還與用戶(hù)偏愛(ài)的默認(rèn)大小有關(guān)。在IE中應(yīng)用em的結(jié)果難以預(yù)料。在IE中最好使用百分比來(lái)設(shè)定文本大小。
下面的例子結(jié)合使用em和百分比值來(lái)對(duì)文本進(jìn)行格式化。基本文本用百分比值來(lái)設(shè)置,然后用em來(lái)進(jìn)行調(diào)整。
全都與外觀有關(guān)
現(xiàn)有的標(biāo)準(zhǔn)提供許多格式化并呈現(xiàn)網(wǎng)絡(luò)應(yīng)用中的文本的方法。開(kāi)發(fā)者可以很方便地將文本分解成相對(duì)和絕對(duì)標(biāo)識(shí)符。關(guān)鍵在于保持一致,并徹底檢測(cè)解決方案。
字體大小
CSS2規(guī)范根據(jù)長(zhǎng)度——水平和垂直尺寸——來(lái)定義字體。這個(gè)長(zhǎng)度為一個(gè)數(shù)值,前面可能帶一個(gè)可選的加(+)或減(-)標(biāo)記符。另外,該數(shù)值后可能有一個(gè)可選的單位標(biāo)識(shí)符。
另外,CSS2規(guī)范定義了兩個(gè)單位類(lèi)型:絕對(duì)單位和相對(duì)單位。絕對(duì)值指定單位,而相對(duì)單位指定一個(gè)與另一個(gè)值成比例的值。下面的列表列出了相對(duì)單位標(biāo)識(shí)符:
em:元素字體的高度。它與使用該字體的元素的字體大小屬性計(jì)算值相等。當(dāng)它出現(xiàn)在字體大小屬性值本身中時(shí),會(huì)出現(xiàn)異常,這時(shí)它指母元素的字體大小。
示例代碼 [m.dounai2.com]
ex(x-高度):CSS2規(guī)范將它描述為小寫(xiě)字母x的高度。
px(像素):它與背景或屏幕的分辨率有關(guān)。根據(jù)顯示器分辨率輸出不同像素,由于用戶(hù)的喜好不同,顯示器的分辨率可能會(huì)有很大差異。
px(像素):它與背景或屏幕的分辨率有關(guān)。根據(jù)顯示器分辨率輸出不同像素,由于用戶(hù)的喜好不同,顯示器的分辨率可能會(huì)有很大差異。
下面是有效的絕對(duì)單位標(biāo)識(shí)符:
示例代碼 [m.dounai2.com]
in(英寸)
cm(厘米)
mm(毫米)
pt(點(diǎn),1點(diǎn)=1/72英寸)
pc(12點(diǎn)活字,1pc=12點(diǎn))
cm(厘米)
mm(毫米)
pt(點(diǎn),1點(diǎn)=1/72英寸)
pc(12點(diǎn)活字,1pc=12點(diǎn))
測(cè)量絕對(duì)大小的另一種方法是使用衡量一個(gè)值的比例因數(shù),應(yīng)用以下關(guān)鍵字:最小、較小、小、中、大、較大和最小。中為基值,變小就減去一個(gè)因數(shù),變大就增加一個(gè)因數(shù),等等。CSS2規(guī)范定義的比例因數(shù)為1.2,這個(gè)值也可能依瀏覽器而變化。
還可以應(yīng)用百分比值來(lái)格式化文本。百分比值是一個(gè)可選的標(biāo)記符,即數(shù)字后帶有一個(gè)百分比符號(hào)(%)。百分比值總是與另一個(gè)值成比例。就字體而言,它與網(wǎng)頁(yè)的基本字體大小成一定比例。
如您所見(jiàn),有許多方法可完成呈現(xiàn)文本這個(gè)看似簡(jiǎn)單的任務(wù)。下面的HTML格式文本(在段落元素中)應(yīng)用了各種單位標(biāo)識(shí)符。其中所有的值都相等,并假定以72dpi進(jìn)行顯示。
示例代碼 [m.dounai2.com]
<html><head>
<title>Font Sizing - equal values</title>
</head><body>
<p style="font-size: 36pt;">Point</p>
<p style="font-size: 3pc;">Pica</p>
<p style="font-size: 0.5in;">Inches</p>
<p style="font-size: 1.27cm;">Centimeters</p>
<p style="font-size: 12.7mm;">Millimeters</p>
<p style="font-size: 300%;">Percentage</p>
</body></html>
<title>Font Sizing - equal values</title>
</head><body>
<p style="font-size: 36pt;">Point</p>
<p style="font-size: 3pc;">Pica</p>
<p style="font-size: 0.5in;">Inches</p>
<p style="font-size: 1.27cm;">Centimeters</p>
<p style="font-size: 12.7mm;">Millimeters</p>
<p style="font-size: 300%;">Percentage</p>
</body></html>
您可以在這個(gè)列表中增加像素值,但它的值要依環(huán)境而定。例如,我的分辨率為1280X1024的手提電腦將顯示與在上表中使用50像素值一致的文本。
仔細(xì)閱讀前面提到的CSS2規(guī)范,可以獲得更多字體大小方面的知識(shí)。現(xiàn)在我將討論如何決定在網(wǎng)絡(luò)應(yīng)用中使用哪種方法。
選擇哪一種方法
在CSS中有許多和字體有關(guān)的選項(xiàng),但哪一種最適合在您的網(wǎng)絡(luò)應(yīng)用中使用呢?絕對(duì)大小有許多缺陷,特別是在一致性、靈活性與訪問(wèn)性方面存在問(wèn)題。與絕對(duì)字體大小相比,任何視力有缺陷的用戶(hù)可使用相對(duì)字體大小來(lái)擴(kuò)大頁(yè)面中的文字,這樣更便于閱讀。因此,開(kāi)發(fā)者經(jīng)常使用相對(duì)大小。
讓我們來(lái)詳細(xì)了解一下相對(duì)大小:
像素是最通用的大小值。多數(shù)瀏覽器都支持它,但也并非總是如此。瀏覽器常常將像素當(dāng)作屏幕像素而非CSS像素來(lái)處理。像素的一個(gè)缺點(diǎn)在于,它忽略或否定用戶(hù)的喜好,且不能在IE中調(diào)整大小。
許多開(kāi)發(fā)者偏愛(ài)用點(diǎn)來(lái)衡量字體大小,但點(diǎn)主要用于桌面印刷系統(tǒng),不方便移植到網(wǎng)絡(luò)中。在呈現(xiàn)文本時(shí),操作系統(tǒng)或?yàn)g覽器默認(rèn)使用像素。
最常用的方法是使用em或百分比大小。EM可在所有支持調(diào)整尺寸的瀏覽器中進(jìn)行調(diào)整。Em還與用戶(hù)偏愛(ài)的默認(rèn)大小有關(guān)。在IE中應(yīng)用em的結(jié)果難以預(yù)料。在IE中最好使用百分比來(lái)設(shè)定文本大小。
下面的例子結(jié)合使用em和百分比值來(lái)對(duì)文本進(jìn)行格式化。基本文本用百分比值來(lái)設(shè)置,然后用em來(lái)進(jìn)行調(diào)整。
示例代碼 [m.dounai2.com]
<html><head>
<title>Display Test</title>
<style type="text/css">
body {font: Sans Serif, Arial; font-size: 110 %}
</style></head><body>
<p style="font-size: 1.0em;">Basic text.</p>
<p style="font-size: 1.5em;">Larger text.</p>
<p style="font-size: 0.5em;">smaller text.</p>
</body></html>
<title>Display Test</title>
<style type="text/css">
body {font: Sans Serif, Arial; font-size: 110 %}
</style></head><body>
<p style="font-size: 1.0em;">Basic text.</p>
<p style="font-size: 1.5em;">Larger text.</p>
<p style="font-size: 0.5em;">smaller text.</p>
</body></html>
全都與外觀有關(guān)
現(xiàn)有的標(biāo)準(zhǔn)提供許多格式化并呈現(xiàn)網(wǎng)絡(luò)應(yīng)用中的文本的方法。開(kāi)發(fā)者可以很方便地將文本分解成相對(duì)和絕對(duì)標(biāo)識(shí)符。關(guān)鍵在于保持一致,并徹底檢測(cè)解決方案。
相關(guān)Web標(biāo)準(zhǔn)教程:
- Web標(biāo)準(zhǔn):需要正確的使用H1~ H6標(biāo)簽
- 五個(gè)WEB標(biāo)準(zhǔn)中必須注意的地方
- 做到結(jié)構(gòu)(XHTML),表現(xiàn)(CSS),行為(JavaScript)的分離
- CSS標(biāo)準(zhǔn):HTML標(biāo)簽元素的關(guān)閉
- Web標(biāo)準(zhǔn)之路 勿使用W3C廢棄的元素
- CSS布局 聲明文檔類(lèi)型描述(DTD)
- DIV CSS\讓搜索引擎蜘蛛不再累
- 用XHTML+CSS創(chuàng)建基于Web標(biāo)準(zhǔn)的網(wǎng)頁(yè)
- XHTML+CSS創(chuàng)建基于Web標(biāo)準(zhǔn)的網(wǎng)站
- DIV+CSS對(duì)SEO的幫助
- 淺析什么是Web標(biāo)準(zhǔn) 及其前景
- CSSer新手寄語(yǔ):開(kāi)始標(biāo)準(zhǔn)之路
- 相關(guān)鏈接:
- 教程說(shuō)明:
Web標(biāo)準(zhǔn)教程-CSS如何定義文字大小以體現(xiàn)用戶(hù)體驗(yàn)。