CSS網頁設計時關於字型大小的設計

2022-09-25 20:33:13 字數 1251 閱讀 9886

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

字型大小

css2規範根據長度——水平和垂直尺寸——來定義字型。這個長度為乙個數值,前面可能帶乙個可選的加( )或程式設計客棧減(-)標記符。另外,該數值後可能有乙個可選的單位識別符號。

另外,css2規範定義了兩個單位型別:絕對單位和相對單位。絕對值指定單位,而相對單位指定乙個與另乙個值成比例的值。下面的列表列出了相對單位識別符號:

em:元素字型的高度。它與使用該字型的元素的字型大小屬性計算值相等。當它出現在字型大小屬性值本身中時,會出現異常,這時它指母元素的字型大小。

ex(x-高度):css2規範將它描述為小寫字母x的高度。

px(畫素):它與背景或螢幕的解析度有關。根據顯示器解析度輸出不同畫素,由於使用者的喜好不同,顯示器的解析度可能會有很大差異。

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

in(英吋)

cm(厘公尺)

mm(公釐)

pt(點,1點=1/72英吋)

pc(12點活字,1pc=12點)

測量絕對大小的另一種方法是使用衡量乙個值的比例因數,應用以下關鍵字:最小、較小、小、中、大、較大和最小。中為基值,變小就減去乙個因數,變大就增加乙個因數,等等。css2規範定義的比例因數為1.2,這個值也可能依瀏覽器而變化。

還可以應用百分比值來格式化文字。百分比值是乙個可選的標記符,即數字後帶有乙個百分比符號(%)。百分比值總是與另乙個值成比例。就字型而言,它與網頁的基本字型大小成一定比例。

如您所見,有許多方法可完成呈現文字這個看似簡單的任務。下面的html格式文字(在段落元素中)應用了各種單位識別符號。其中所有的值都相等,並假定以72dpi進行顯示。

font sizing - equal values

point

程式設計客棧;font-size: 3pc;">pica

inches

centimeters

millimeters

程式設計客棧0%;">percenwww.cppcns.comtage

您可以在這個列表中增加畫素值,但它的值要依環境而定。例如,我的解析度為1280x1024的手提電腦將顯示與在上表中使用50畫素值一致的文字。

仔細閱讀前面提到的css2規範,可以獲得更多字型大小方面的知識。現在我將討論如何決定在網路應用中使用哪種方法。

選擇哪一種方法

設計時如何把握網頁布局

最開始,網頁呈現在你面前的時侯,它就好像一張白紙,它需要你任意揮灑你的設計才思。在開始的時侯,你需要明白,雖然你能控制一切你所能控制的東西,但假如你知道什麼是一種約定俗成的標準或者說大多數訪問者的瀏覽習慣,那麼你可以在此基礎上加上自己的東西。你當然也可以創造出自己的設計方案,但如果你是初學者,那麼最...

響應式網頁設計 rem em設定網頁字型大小自適應

rem 是指根元素 root element,html 的字型大小,好開心的是,從遙遠的 ie6 到版本帝 chrome 他們都約好了,根元素預設的 font size 都是 16px。這樣乙個新的單位相容性如何呢?ie9 firefox chrome safari opera 的主流版本都支援了,...

響應式網頁設計 rem em設定網頁字型大小自適應

rem 是指根元素 root element,html 的字型大小,好開心的是,從遙遠的 ie6 到版本帝 chrome 他們都約好了,根元素預設的 font size 都是 16px。這樣乙個新的單位相容性如何呢?ie9 firefox chrome safari opera 的主流版本都支援了,...