CSS中font-size屬性值四大種類
本文和大家重點(diǎn)學(xué)習(xí)一下CSS中font-size屬性值四大種類,我們用px作為文字大小的單位,已經(jīng)出現(xiàn)很多問題,現(xiàn)在IE瀏覽器是主流,但我們不能通過瀏覽器設(shè)置文字大小,因?yàn)槲覀冇胮x作為文字大小的單位。
CSS中font-size屬性值四大種類
我們逐漸意識(shí)到,我們用px作為文字大小的單位,已經(jīng)出現(xiàn)很多問題。最主要是體現(xiàn)在用戶不能靈活的控制文字的大小,現(xiàn)在IE瀏覽器是主流,但我們不能通過瀏覽器設(shè)置文字大小,因?yàn)槲覀冇胮x作為文字大小的單位。
對(duì)于大多數(shù)用戶來說或許這并無不妥,但對(duì)于年齡稍大及眼力不佳的訪客來說,他們不能按他們的意愿,通過瀏覽器來改變文字的大小。我們以“用戶至上”為原則,我們應(yīng)該采取一種策略,不要求通過px為單位獲得100%的精確性,我們需要獲得更大的瀏覽器的可伸縮性與易用性,靈活的滿足訪客的需要。關(guān)于這類話題我們?cè)谝院?1cto.com的教程中,與大家再進(jìn)行深入的探討。我們今天對(duì)font-size屬性的值進(jìn)行一些分析,看從中我們能得到一些什么啟示。
一、長度單位
長度單位分為兩種,一種是相對(duì)長度,另一種是絕對(duì)長度。
以下為三種相對(duì)長度單位:
◆em相對(duì)于父對(duì)象的大小
◆ex相對(duì)于特定字體中的字母x的高度
◆px相對(duì)于特定設(shè)備的分辨率,這是最最常用的單位,也是我們一直堅(jiān)守的單位。從技術(shù)角度來說,px像素其實(shí)是一種相對(duì)大小的度量單位,它于特定設(shè)備的顯示或打印的分辨率有關(guān)。例如,一個(gè)像素在被顯示在計(jì)算機(jī)屏幕上與被打印在紙張上的大小是不同的。
以下為五種font-size屬性值絕對(duì)長度單位:
絕對(duì)長度單位在打印時(shí)或在屏幕顯示設(shè)備的物理尺寸已知時(shí)才比較有用。
◆in英寸
◆cm厘米
◆mm毫米
◆pt點(diǎn)
◆pc12點(diǎn)活字
二、相對(duì)大小的關(guān)鍵字
font-size屬性值相對(duì)大小的關(guān)鍵字只有兩個(gè)值:
◆larger
◆smaller
這兩個(gè)值的設(shè)定與父對(duì)象的設(shè)定值有關(guān)。我們可以像理解老式的<small><big>那樣來理解它們。它們是設(shè)定文字大小的最基本的方式,并會(huì)受到上層對(duì)象的文字大小定義的影響。
三、絕對(duì)大小的關(guān)鍵字
這類關(guān)鍵字共有7個(gè),他們的實(shí)際大小根據(jù)不同的瀏覽器及設(shè)備來決定。
◆xx-small
◆x-small
◆small
◆medium
◆large
◆x-large
◆xx-large
W3C建立建議瀏覽器開發(fā)公司,將每個(gè)關(guān)鍵字之間的比例設(shè)定為1.5。并推薦讓這個(gè)比例保持恒定,媽medium是small的1.5倍。同樣large是medium的1.5倍。
四、百分比
font-size屬性值中使用百分比設(shè)置大小,將在容器對(duì)象文字大小的基礎(chǔ)上進(jìn)行改變。如果我們?cè)O(shè)置body的文字大小為10。我們?cè)O(shè)置p的文字大小為150%,則p的文字大小就為15。不管10是什么樣的單位,百分比作為一種比例進(jìn)行縮放調(diào)整。
我們可以從更深層次去思考,我們將在51cto.com以后的文章中進(jìn)行發(fā)布,面對(duì)這些定義文字大小屬性值的單位,我們?nèi)绾螢橛脩籼峁┮粋€(gè)靈活的瀏覽環(huán)境,并允許他們按他們的意愿來控制文字的大小以更方便于瀏覽。
【編輯推薦】
- 詳解CSS布局技巧十則
- CSS布局中float和position屬性使用技巧
- CSS中實(shí)現(xiàn)DIV容器垂直居中方法揭秘
- CSS Sprites對(duì)CSS布局的意義及優(yōu)缺點(diǎn)
- CSS布局中display:inline-block屬性用法詳解