DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 美化字體
美化字體
編輯:CSS詳解     

你可能正建立自己在網上的家-WEB頁,又或者它已經被你安置在網絡某一角裡。無論出於什麼目的,你都希望有更多的指導,告訴你該如何更好的布置家。

 

 

在目前許多的指導中,他們都在訴說,應該加一點聲音或者一個說話的場地。的確我們都需要它,但我希望關心更多WEB家裡底層的東西,比如如何把字體弄的漂亮些,或者讓頁面顏色變的活潑些,讓訪問者增加“看欲”,還有更多你曾經都沒有關注的細微之處。今天,我們首先來探討頁面的字體。

一、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的資料來看,因為它們才是實現所有“夢想”的工具。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved