DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS根據用戶需求設置網頁字體大小
CSS根據用戶需求設置網頁字體大小
編輯:CSS詳解     
在進行CSS頁頁布局時,頁面的外觀很重要,但也需要考慮字體與文字大小的問題,在webjx.com中也有過相關的介紹。如果發現設計人員十分關注字體及字體大小,我並不感到驚奇。使用CSS來編輯字體有各種各樣的方法,每位設計師都會有自己偏愛的設計習慣,但必須選擇更能提高用戶體驗的方法。今天網頁教學網將集中討論字體大小的控制來體現更多的用戶體驗。

  字體大小
  CSS2規范中關於水平和垂直尺寸來定義字體的長度。這個長度為一個數值,前面可能帶一個可選的加(+)或減(-)標記符。另外,該數值後可能有一個可選的單位標識符。
  另外,CSS2規范定義了兩個單位類型:絕對單位和相對單位。絕對值指定單位,而相對單位指定一個與另一個值成比例的值。下面的列表列出了相對單位標識符:
  
  em:字體的高度,相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置,則相對於浏覽器的默認字體尺寸(16px)。
  ex(x-高度):CSS2規范將它描述為小寫字母x的高度。 
  px(像素):它與背景或屏幕的分辨率有關。根據顯示器分辨率輸出不同像素,由於用戶的喜好不同,顯示器的分辨率可能會有很大差異。

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

in(英寸) 
cm(厘米) 
mm(毫米) 
pt(點,1點=1/72英寸) 
pc(12點活字,1pc=12點)
  測量絕對大小的另一種方法是使用衡量一個值的比例因數,應用以下關鍵字:最小、較小、小、中、大、較大和最小。中為基值,變小就減去一個因數,變大就增加一個因數,等等。CSS2規范定義的比例因數為1.2,這個值也可能依浏覽器而變化。
  還可以應用百分比值來格式化文本。百分比值是一個可選的標記符,即數字後帶有一個百分比符號(%)。百分比值總是與另一個值成比例。就字體而言,它與網頁的基本字體大小成一定比例。
  如您所見,有許多方法可完成呈現文本這個看似簡單的任務。下面的Html格式文本(在段落元素中)應用了各種單位標識符。其中所有的值都相等,並假定以72dpi進行顯示。

<Html>
<head> 
<title>Font Sizing - equal values [www.webjx.com]</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 - www.webjx.com</p> 
</body>
</Html>  
  您可以在這個列表中增加像素值,但它的值要依環境而定。例如,我的分辨率為1280X1024的手提電腦將顯示與在上表中使用50像素值一致的文本。
  仔細閱讀前面提到的CSS2規范,可以獲得更多字體大小方面的知識。現在我將討論如何決定在網絡應用中使用哪種方法。

  選擇哪一種方法
  在CSS中有許多和字體有關的選項,但哪一種最適合在您的網絡應用中使用呢?絕對大小有許多缺陷,特別是在一致性、靈活性與訪問性方面存在問題。與絕對字體大小相比,任何視力有缺陷的用戶可使用相對字體大小來擴大頁面中的文字,這樣更便於閱讀。因此,開發者經常使用相對大小。
  讓我們來詳細了解一下相對大小:
  像素是最通用的大小值。多數浏覽器都支持它,但也並非總是如此。浏覽器常常將像素當作屏幕像素而非CSS像素來處理。像素的一個缺點在於,它忽略或否定用戶的喜好,且不能在IE中調整大小。
  許多開發者偏愛用點來衡量字體大小,但點主要用於桌面印刷系統,不方便移植到網絡中。在呈現文本時,操作系統或浏覽器默認使用像素。
  最常用的方法是使用em或百分比大小。EM可在所有支持調整尺寸的浏覽器中進行調整。Em還與用戶偏愛的默認大小有關。在IE中應用em的結果難以預料。在IE中最好使用百分比來設定文本大小。
  下面的例子結合使用em和百分比值來對文本進行格式化。基本文本用百分比值來設置,然後用em來進行調整。

<Html>
<head>
<title>Display Test - www.webjx.com</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. www.webjx.com</p> 
</body>
</Html>  
  所有都與外觀有關
  現有的標准提供許多格式化並呈現網絡應用中的文本的方法。開發者可以很方便地將文本分解成相對和絕對標識符。關鍵在於保持一致,並徹底檢測解決方案。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved