您當前位置：首頁 > web前端 > htmlcss > CSS如何定義文字大小以體現用戶體驗

CSS如何定義文字大小以體現用戶體驗

來源：程序員人生發布時間：2013-10-14 07:56:24 閱讀次數：2696次

在設計網絡應用時，您必須決定如何編輯字體。使用CSS時存在大量選項，每個開發者都有自己的喜好。本文主要討論字體大小和網絡應用內的操作。在開發網絡應用時，沒有比外觀更重要的事情了。所以，如果發現設計人員十分關注字體及字體大小，我不會感到奇怪！

　　字體大小
　　CSS2規范根據長度——水平和垂直尺寸——來定義字體。這個長度為一個數值，前面可能帶一個可選的加(+)或減(-)標記符。另外，該數值后可能有一個可選的單位標識符。
　　另外，CSS2規范定義了兩個單位類型:絕對單位和相對單位。絕對值指定單位，而相對單位指定一個與另一個值成比例的值。下面的列表列出了相對單位標識符:
　　em:元素字體的高度。它與使用該字體的元素的字體大小屬性計算值相等。當它出現在字體大小屬性值本身中時，會出現異常，這時它指母元素的字體大小。

Example Source Code [www.vxbq.cn]

　　ex(x-高度):CSS2規范將它描述為小寫字母x的高度。
　　px(像素):它與背景或屏幕的分辨率有關。根據顯示器分辨率輸出不同像素，由于用戶的喜好不同，顯示器的分辨率可能會有很大差異。

　　下面是有效的絕對單位標識符:

Example Source Code [www.vxbq.cn]

　　in(英寸)
　　cm(厘米)
　　mm(毫米)
　　pt(點，1點=1/72英寸)
　　pc(12點活字，1pc=12點)

　　測量絕對大小的另一種方法是使用衡量一個值的比例因數，應用以下關鍵字:最小、較小、小、中、大、較大和最小。中為基值，變小就減去一個因數，變大就增加一個因數，等等。CSS2規范定義的比例因數為1.2，這個值也可能依瀏覽器而變化。
　　還可以應用百分比值來格式化文本。百分比值是一個可選的標記符，即數字后帶有一個百分比符號(%)。百分比值總是與另一個值成比例。就字體而言，它與網頁的基本字體大小成一定比例。
　　如您所見，有許多方法可完成呈現文本這個看似簡單的任務。下面的HTML格式文本(在段落元素中)應用了各種單位標識符。其中所有的值都相等，并假定以72dpi進行顯示。
Example Source Code [www.vxbq.cn]

<html><head>
<title>Font Sizing - equal values</title>
</head><body>
Point
Pica
Inches
Centimeters
Millimeters
Percentage
</body></html>

　　您可以在這個列表中增加像素值，但它的值要依環境而定。例如，我的分辨率為1280X1024的手提電腦將顯示與在上表中使用50像素值一致的文本。
　　仔細閱讀前面提到的CSS2規范，可以獲得更多字體大小方面的知識?，F在我將討論如何決定在網絡應用中使用哪種方法。

　　選擇哪一種方法
　　在CSS中有許多和字體有關的選項，但哪一種最適合在您的網絡應用中使用呢?絕對大小有許多缺陷，特別是在一致性、靈活性與訪問性方面存在問題。與絕對字體大小相比，任何視力有缺陷的用戶可使用相對字體大小來擴大頁面中的文字，這樣更便于閱讀。因此，開發者經常使用相對大小。

　　讓我們來詳細了解一下相對大小:
　　像素是最通用的大小值。多數瀏覽器都支持它，但也并非總是如此。瀏覽器常常將像素當作屏幕像素而非CSS像素來處理。像素的一個缺點在于，它忽略或否定用戶的喜好，且不能在IE中調整大小。
　　許多開發者偏愛用點來衡量字體大小，但點主要用于桌面印刷系統，不方便移植到網絡中。在呈現文本時，操作系統或瀏覽器默認使用像素。
　　最常用的方法是使用em或百分比大小。EM可在所有支持調整尺寸的瀏覽器中進行調整。Em還與用戶偏愛的默認大小有關。在IE中應用em的結果難以預料。在IE中最好使用百分比來設定文本大小。

　　下面的例子結合使用em和百分比值來對文本進行格式化?；疚谋居冒俜直戎祦碓O置，然后用em來進行調整。

Example Source Code [www.vxbq.cn]

<html><head>
<title>Display Test</title>
<style type="text/css">
body {font: Sans Serif, Arial; font-size: 110 %}
</style></head><body>
Basic text.
Larger text.
smaller text.
</body></html>

　　全都與外觀有關
　　現有的標準提供許多格式化并呈現網絡應用中的文本的方法。開發者可以很方便地將文本分解成相對和絕對標識符。關鍵在于保持一致，并徹底檢測解決方案。

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 Css技巧：div下圖片自適應大小的解決辦法

下一篇 Access數據庫開發技巧(一)

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

CSS如何定義文字大小以體現用戶體驗