2.3 對(duì)字號(hào)的控制

2018-11-06 18:02 更新
2.3 對(duì)字號(hào)的控制



利用HTML你只能<FONT SIZE=X?>設(shè)定7種字號(hào),很令人沮喪,是吧?但等你看完本頁(yè)之后,你將會(huì)發(fā)出一聲長(zhǎng)長(zhǎng)的WOOOOOOOOOOOW!

字號(hào)

使用font-size 屬性,你可以對(duì)文字的尺寸進(jìn)行無(wú)限的控制。

確定這的3種基本方法:

  • Points, ems, pixels, 及其它單位

  • 關(guān)鍵字

  • 比例參數(shù)


Points, Ems, Pixels, 及其它單位

樣式表可以識(shí)別許多種確定一種要素尺寸的不同單位:

第1種, points:

    P { font-size: 16pt }



這條代碼告訴瀏覽器以16 points(點(diǎn))的尺寸顯示<P>。

Points是確定文字尺寸非常好的單位,因?yàn)樗谒械臑g覽器和操作平臺(tái)上都適用。你唯一需要留意的就是在缺省設(shè)置下,PC機(jī)中顯示的字要比MAC機(jī)中顯示的大一些。

如果這一點(diǎn)對(duì)你來(lái)說(shuō)很重要的話,你可以利用javascript識(shí)別不同人所使用的操作平臺(tái),然后根據(jù)不同的平臺(tái)鏈接相應(yīng)的CSS文件。若想學(xué)習(xí)制作方法,請(qǐng)點(diǎn)擊
learnhow


Points, like all other units, work as small or as
big as you want (that was 8
points and 80 points, respectively).


以上語(yǔ)句采用CSS font-size屬性制作。如果你的瀏覽器不支持這種屬性,請(qǐng)點(diǎn)擊這里查看顯示效果。

下一個(gè)單位,EM:

P { font-size: 20pt }
B { font-size: 1.5em }

em 是和point相同的距離單位。在樣式表中,em指母體要素的尺寸。所以,在上例中,所有包含在<P>中的<B>的文字的尺寸將是30points(因?yàn)?lt;B>中的找是母體字號(hào)(20pt)的1.5倍。

但是,瀏覽器對(duì)em不是很支持,所以你還是最好用point單位。

下一個(gè)單位,pixels:

    P { font-size: 20px }



從網(wǎng)頁(yè)設(shè)計(jì)的角度來(lái)說(shuō),pixel(象素)是一個(gè)非常熟悉的單位,它最大的優(yōu)點(diǎn)就在于所有的操作平臺(tái)都支持pixel單位(而對(duì)于其它的單位來(lái)說(shuō),PC機(jī)的文字總是顯得比MAC機(jī)中大一些。

而其不利之處在于,當(dāng)你使用pixels單位時(shí),網(wǎng)頁(yè)的屏幕顯示不穩(wěn)定,字體時(shí)大時(shí)小,甚至有時(shí)根本不顯示,而points 單位則沒(méi)有這種問(wèn)題。

其它單位:如果上述單位仍然不符合你的要求,請(qǐng)?jiān)囋囘@些單位:

  • in (英寸)

  • cm (厘米)

  • mm (毫米)

  • pc (打字機(jī)字型尺寸單位)

  • ex (x-height)


關(guān)鍵字

如果你不喜歡使用這些單位,你還可以選擇以關(guān)鍵字說(shuō)明文字尺寸,例:

    P { font-size: large }



有7種關(guān)鍵字,相對(duì)應(yīng)于<FONTSIZE>中所用的數(shù)字參數(shù):

  • xx-small

  • x-small

  • small

  • medium

  • large

  • x-large

  • xx-large


利用這些參數(shù),Web瀏覽器可以自由決定每一種關(guān)鍵字所適合的尺寸。例如:在Netscape Communicator中x-large的尺寸為28points,而在IE 4(windows及MAC)中為24points,而在Win 95下的IE 3中為18points。

還要兩種相對(duì)尺寸關(guān)鍵字:

  • smaller

  • larger


smaller參數(shù)告訴瀏覽器將當(dāng)前文字在關(guān)鍵字規(guī)格基礎(chǔ)上“縮小一級(jí)”,例如,如果large字號(hào)的文字應(yīng)用smaller參數(shù),則其字號(hào)變成了midium尺寸。larger參數(shù)的作用類似。

(注意:IE 3不支持smaller或larger參數(shù)。)


比例參數(shù)


設(shè)定文字尺寸的第3種辦法就是使用比例參數(shù),例:

    P { font-size: 15pt }
    B { font-size: 300% }


這些規(guī)則的含義為:使所有包含在<P>中的的<B>文字的尺寸為<P>尺寸設(shè)定值的3倍,即45 points。比例參數(shù)常用于從母體要素繼承的參數(shù)值。

瀏覽器對(duì)比例參數(shù)比較挑剔,所以你必須經(jīng)常測(cè)試。

有了這么多的選擇是不是很讓人高興呢?由于有了font-size屬性,我們能夠隨意調(diào)整文字的尺寸,如同以下的例子所示:(每一個(gè)字母i都比前一個(gè)大5pt)


i i i i i i i i i i i i i i


試著用HTML制作這種效果!


如果你的瀏覽器不支持CSS屬性,請(qǐng)點(diǎn)擊這里查看顯示效果。



以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)