字體大小
CSS2規範根據長度——水準和垂直尺寸——來定義字體。 這個長度為一個數值，前面可能帶一個可選的加(+)或減(-)標記符。 另外，該數值後可能有一個可選的單位識別碼。
另外，CSS2規範定義了兩個單位類型:絕對單位和相對單位。 絕對值指定單位，而相對單位指定一個與另一個值成比例的值。 下面的清單列出了相對單位識別碼:
em:元素字體的高度。 它與使用該字體的元素的字體大小屬性計算值相等。 當它出現在字體大小屬性值本身中時，會出現異常，這時它指母元素的字體大小。
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</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>
您可以在這個清單中增加圖元值，但它的值要依環境而定。 例如，我的解析度為1280X1024的手提電腦將顯示與在上表中使用50圖元值一致的文本。
仔細閱讀前面提到的CSS2規範，可以獲得更多字體大小方面的知識。 現在我將討論如何決定在網路應用中使用哪種方法。
選擇哪一種方法
在CSS中有許多和字體有關的選項，但哪一種最適合在您的網路應用中使用呢?絕對大小有許多缺陷，特別是在一致性、靈活性與訪問性方面存在問題。 與絕對字體大小相比，任何視力有缺陷的使用者可使用相對字體大小來擴大頁面中的文字，這樣更便於閱讀。 因此，開發者經常使用相對大小。
讓我們來詳細瞭解一下相對大小:
圖元是最通用的大小值。 多數瀏覽器都支援它，但也並非總是如此。 瀏覽器常常將圖元當作螢幕圖元而非CSS圖元來處理。 圖元的一個缺點在於，它忽略或否定使用者的喜好，且不能在IE中調整大小。
許多開發者偏愛用點來衡量字體大小，但點主要用於桌面印刷系統，不方便移植到網路中。 在呈現文本時，作業系統或瀏覽器預設使用圖元。
最常用的方法是使用em或百分比大小。 EM可在所有支援調整尺寸的瀏覽器中進行調整。 Em還與使用者偏愛的預設大小有關。 在IE中應用em的結果難以預料。 在IE中最好使用百分比來設定文本大小。
下面的例子結合使用em和百分比值來對文本進行格式化。 基本文本用百分比值來設置，然後用em來進行調整。
<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>
全都與外觀有關
現有的標準提供許多格式化並呈現網路應用中的文本的方法。 開發者可以很方便地將文本分解成相對和絕對識別碼。 關鍵在於保持一致，並徹底檢測解決方案。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
