CSS樣式設(shè)計(jì)網(wǎng)頁(yè)字體與用戶體驗(yàn)

2024-07-11 08:38:37

字體：大中小

供稿：網(wǎng)友

在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，沒有比頁(yè)面的外觀更重要的了。所以，如果發(fā)現(xiàn)設(shè)計(jì)人員十分關(guān)注字體及字體大小，我并不感到驚奇。使用CSS來編輯字體有各種各樣的方法，每位設(shè)計(jì)師都會(huì)有自己偏愛的設(shè)計(jì)習(xí)慣，但必須選擇更能提高用戶體驗(yàn)的方法。今天暴風(fēng)彬彬?qū)⒓杏懻撟煮w大小的控制來體

　　在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，沒有比頁(yè)面的外觀更重要的了。所以，如果發(fā)現(xiàn)設(shè)計(jì)人員十分關(guān)注字體及字體大小，我并不感到驚奇。使用CSS來編輯字體有各種各樣的方法，每位設(shè)計(jì)師都會(huì)有自己偏愛的設(shè)計(jì)習(xí)慣，但必須選擇更能提高用戶體驗(yàn)的方法。今天暴風(fēng)彬彬?qū)⒓杏懻撟煮w大小的控制來體現(xiàn)更多的用戶體驗(yàn)。

字體大小

　　CSS2規(guī)范中關(guān)于水平和垂直尺寸來定義字體的長(zhǎng)度。這個(gè)長(zhǎng)度為一個(gè)數(shù)值，前面可能帶一個(gè)可選的加( )或減(-)標(biāo)記符。另外，該數(shù)值后可能有一個(gè)可選的單位標(biāo)識(shí)符。
　　另外，CSS2規(guī)范定義了兩個(gè)單位類型:絕對(duì)單位和相對(duì)單位。絕對(duì)值指定單位，而相對(duì)單位指定一個(gè)與另一個(gè)值成比例的值。下面的列表列出了相對(duì)單位標(biāo)識(shí)符:
　　

em:字體的高度,相對(duì)長(zhǎng)度單位。相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。如當(dāng)前對(duì)行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對(duì)于瀏覽器的默認(rèn)字體尺寸(16px)。
ex(x-高度):CSS2規(guī)范將它描述為小寫字母x的高度。
px(像素):它與背景或屏幕的分辨率有關(guān)。根據(jù)顯示器分辨率輸出不同像素，由于用戶的喜好不同，顯示器的分辨率可能會(huì)有很大差異。

下面是有效的絕對(duì)單位標(biāo)識(shí)符:

in(英寸)
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)用百分比值來格式化文本。百分比值是一個(gè)可選的標(biāo)記符，即數(shù)字后帶有一個(gè)百分比符號(hào)(%)。百分比值總是與另一個(gè)值成比例。就字體而言，它與網(wǎng)頁(yè)的基本字體大小成一定比例。
　　如您所見，有許多方法可完成呈現(xiàn)文本這個(gè)看似簡(jiǎn)單的任務(wù)。下面的HTML格式文本(在段落元素中)應(yīng)用了各種單位標(biāo)識(shí)符。其中所有的值都相等，并假定以72dpi進(jìn)行顯示。