如何設置css讓字體更美

如何更好的布置，比如如何把字體弄的漂亮些，或者讓頁面顏色變的活潑些，讓訪問者增加“看欲”，還有更多你曾經都沒有關注的細微之處。今天，我們首先來探討頁面的字體。

一、HTML中定義字體

字體的確是很好打交道的，一開始制作頁面，它就以默認的樣式顯示。隨著逐步的深入，你會改變一下默認的設置，增大或者減小字體。

一般字體默認的標簽格式：＜p＞田濤＜/p＞

接下來，我們把字體設置為黑體或者宋體字樣式，它的標簽如下：

＜p＞＜font face="黑體"＞田濤＜/font＞＜/p＞

在以上格式里，我們引出了字體的標簽元素＜font＞＜/font＞.該標簽具有下面三個屬性值：

size="..." 設置字體的大小，一般從1到7，它的默認值是+3，每次改變字體都是+3或者-3。

color="..." 字體顏色的設置。定義顏色可以利用RGB的16進制值，比如： color=“#ffffff” 。也可以直接利用顏色英文來定義，比如： color=“white”

face="..." 字體樣式的設置，比如：face=“黑體”。或者 face=“黑體，宋體”。后者的格式，每當瀏覽器訪問第一種字體失敗后，瀏覽器就會訪問第二種字體，依此類推。

下面是一個完整的字體格式：

＜font face="黑體" size="2" color="#FFFFFF"＞田濤＜/font＞

HTML還提供了以下字體樣式標簽：

1.六個標題樣式

從h1到h6，如：＜h1＞＜font face="黑體" size="2"＞田濤＜/font＞＜/h1＞

2.字體風格

斜體字：＜em＞田濤＜/em＞

粗體字：＜strong＞田濤＜/strong＞

斜體+粗體字：＜strong＞＜em＞田濤＜/em＞＜/strong＞

3.定義文本

定義大字體

＜big＞田濤＜/big＞

定義小字體

＜small＞田濤＜/small＞或者＜small＞＜small＞＜small＞田濤＜/small＞＜/small＞＜/small＞

如果你在字體標簽中設置了size="...",那么＜big＞標簽將不起作用。

除了以上常用字體標簽元素外，HTML還包含很多其它標簽，但不我們不多用。

二.CSS(層疊樣式表)改變字體

在過去頁面上的字體是一成不變的，靜靜的呆在那。當DHTML(動態網頁)出現后，我們能有更多方式控制字體了。一般來說，動態字體的實現核心是CSS(層疊樣式表)加JavaScript。使用了以上兩項技術后，字體就能產生許多變化。

1.CSS定義字體的標簽元素

font-family: 設置字體字族。

＜span style="font-family: 黑體, 宋體(GB)"＞田濤＜/span＞

font-sytle:設置字體類型。

＜span style="font-style: normal"＞田濤＜/span＞

font-weight:設置字體的字重。

＜span style="font-weight: bold"＞田濤＜/span＞

font-size:設置字體大小。

＜span style="font-size: 14pt"＞田濤＜/span＞

font-decoration:修飾文本字體，比如帶下劃線“underline”。

＜span style="text-decoration: underline"＞田濤＜/span＞

對于以上的字體設置，我們可以采用一個方便的方法：

＜span style="font:normal bold 14pt 黑體"＞田濤＜/span＞

在style定義的次序是：font-style,font-weight,font-size,font-family.

2.CSS定義字體和＜font＞定義字體的沖突

對于CSS定義字體和＜font＞定義字體，我們都要注意以下問題，比如有以下字體設置：

＜span style="font-family: 宋體(KSC); font-size: 200pt"＞＜font＞田濤＜/font＞＜/span＞

這時侯字體大小將以font-size: 200pt的定義來設置。但如果你在＜font＞中加入size屬性，比如：

＜span style="font-family: 宋體(KSC); font-size: 200pt"＞＜font size="5"＞田濤＜/font＞＜/span＞

這時侯，字體的大小以size的設置為準，font-size: 200pt將不起作用。其它的屬性也是一樣。如果你無需動態字體，就利用HTML4.0的＜font＞來定義字體，需要動態字體時，就需要使用CSS和JavaScritp來定義字體及引發事件。

3.定義CSS字體屬性類

一般我們在制作動態字體時，我們會首先利用CSS定義出頁面字體的整個屬性，然后在頁面中引用，而不用對每段文本進行設置，這也是實現動態字體首先一步。

＜HTML＞

＜head＞

＜style type="text/CSS"＞

.tt2 { font-family:"黑體"; font-size: 16px; font-style: normal; line-height: 17px }

＜/style＞

＜/head＞

＜body＞

＜p class="tt2"＞田濤＜/p＞

＜/body＞

＜/HTML＞

在以上代碼中，“田濤”兩個字引用了.main_2類定義的字體樣式。當然你可以在＜style＞＜/style＞中定義不同的字體樣式，以便頁面中根據不同字體加以引用。比如：

＜HTML＞

＜head＞

＜style type="text/CSS"＞

.tt1 { font-family:"宋體"; font-size: 15px; font-style: normal; }

.tt2 { font-family:"黑體"; font-size: 16px; font-style: normal; }

＜/style＞

＜/head＞

＜body＞

＜p class="tt1"＞田濤＜/p＞

＜p class="tt2"＞田濤＜/p＞

＜/body＞

＜/HTML＞

三.讓字體動起來

要讓字體動起來，我們可以利用本身CSS的事件或者讓JavaScript引發事件。

1.CSS引發事件

例一

＜HTML＞

＜head＞

＜style type="text/CSS"＞

＜!--

a:link { color: black; text-decoration: none}

a:visited { color: white; text-decoration: none}

a:hover { color: blue; text-decoration: underline}

--＞

＜/style＞

＜/head＞

＜body＞

＜p＞＜a href="http://zgrtt.yeah.net/"＞田濤＜/a＞＜/p＞

＜/body＞

＜/HTML＞

link定義的是鏈接在頁面顯示的顏色(黑色)及鏈接沒有下劃線，visited定義的是單擊鏈接后的顏色(白色)，hover定義的是指向鏈接時的動態顏色。以上實例表示，當指向鏈接“田濤”后字體顏色從黑色變成藍色，并加下劃線，單擊鏈接后，鏈接顏色變成白色。

例二

＜HTML＞

＜head＞

＜title＞＜/title＞

＜/head＞

＜body＞

＜p onmouseover="this.style.fontSize=200" onmouseout="this.style.fontSize=100"＞田濤 ＜/p＞

＜/body＞

＜/HTML＞

以上實例是利用內聯改變字體樣式，當鼠標指向“田濤”時字體因為定義了this.style.fontSize=200，這兩個字放大至200pt,當鼠標移開“田濤”時，因定義了this.style.fontSize=100，這兩個字體縮小到100pt.

2.JavaScript引發事件

＜HTML＞

＜head＞

＜style＞

H1.italic {font-style:italic}

H1.bold {font-style:bold; }

＜/style＞

＜/head＞

＜body＞

＜script language="JavaScript"＞

function changeHead() {

if (H1_1.className=="bold") {

H1_1.className="italic" }

else {

H1_1.className="bold";}

}

＜/script＞

＜h1 id="H1_1" class="bold" onmouseover="changeHead()" onmouseout="changeHead()"＞田濤 ＜/h1＞

＜/body＞

＜/HTML＞

在上面的實例當中，我們首先定義了兩個CSS類H1.italic和H1.bold，然后利用JavaScript腳本定義函數 changeHead(),最后在需要的地方引發事件執行定義好的函數。這里我們引發了兩個單擊事件onmouseover和onmouseout。在這里我還要說一點，因為你定義了H1兩個類H1.italic 和H1.bold，所以當你在引用時，要首先設置class="bold"，表示字體以bold樣式出現。然后，移動鼠標到“田濤”上，觸發了事件一，移開“田濤”時，觸發了事件二。

對于動態字體，我們還有很多方法來完善它。只是在考慮利用動態字體時，需要了解不同瀏覽器會產生不一樣的結果。這時侯，就需要不停測試，來找到一個兩全其美的方法。最后，希望你在看完這篇文章后，找一點CSS及JavaScript的資料來看，因為它們才是實現所有“夢想”的工具。