一、HTML中定義字體
字體的確是很好打交道的，一開始制作頁面，它就以默認(rèn)的樣式顯示。隨著逐步的深入，你會改變一下默認(rèn)的設(shè)置，增大或者減小字體。
一般字體默認(rèn)的標(biāo)簽格式：
網(wǎng)頁教學(xué)網(wǎng)
接下來，我們把字體設(shè)置為黑體或者宋體字樣式，它的標(biāo)簽如下：
網(wǎng)頁教學(xué)網(wǎng)
在以上格式里，我們引出了字體的標(biāo)簽元素.該標(biāo)簽具有下面三個屬性值：
size="..." 設(shè)置字體的大小，一般從1到7，它的默認(rèn)值是+3，每次改變字體都是+3或者-3。
color="..." 字體顏色的設(shè)置。定義顏色可以利用RGB的16進(jìn)制值，比如： color=“#ffffff” 。也可以直接利用顏色英文來定義，比如： color=“white”
face="..." 字體樣式的設(shè)置，比如：face=“黑體”。或者 face=“黑體，宋體”。后者的格式，每當(dāng)瀏覽器訪問第一種字體失敗后，瀏覽器就會訪問第二種字體，依此類推。
下面是一個完整的字體格式：
網(wǎng)頁教學(xué)網(wǎng)
HTML還提供了以下字體樣式標(biāo)簽：
1.六個標(biāo)題樣式
從h2到h7，如：
2.字體風(fēng)格
斜體字：網(wǎng)頁教學(xué)網(wǎng)
粗體字：網(wǎng)頁教學(xué)網(wǎng)
斜體+粗體字：網(wǎng)頁教學(xué)網(wǎng)
3.定義文本
定義大字體
網(wǎng)頁教學(xué)網(wǎng)
定義小字體
網(wǎng)頁教學(xué)網(wǎng)或者網(wǎng)頁教學(xué)網(wǎng)
如果你在字體標(biāo)簽中設(shè)置了size="...",那么標(biāo)簽將不起作用。
除了以上常用字體標(biāo)簽元素外，HTML還包含很多其它標(biāo)簽，但不我們不多用。
二.CSS(層疊樣式表)改變字體
在過去頁面上的字體是一成不變的，靜靜的呆在那。當(dāng)DHTML(動態(tài)網(wǎng)頁)出現(xiàn)后，我們能有更多方式控制字體了。一般來說，動態(tài)字體的實現(xiàn)核心是CSS(層疊樣式表)加JavaScript。使用了以上兩項技術(shù)后，字體就能產(chǎn)生許多變化。
1.CSS定義字體的標(biāo)簽元素
font-family: 設(shè)置字體字族。
網(wǎng)頁教學(xué)網(wǎng)
font-sytle:設(shè)置字體類型。
網(wǎng)頁教學(xué)網(wǎng)
font-weight:設(shè)置字體的字重。
網(wǎng)頁教學(xué)網(wǎng)
font-size:設(shè)置字體大小。
網(wǎng)頁教學(xué)網(wǎng)
font-decoration:修飾文本字體，比如帶下劃線“underline”。
網(wǎng)頁教學(xué)網(wǎng)
對于以上的字體設(shè)置，我們可以采用一個方便的方法：
網(wǎng)頁教學(xué)網(wǎng)
在style定義的次序是：font-style,font-weight,font-size,font-family.
2.CSS定義字體和定義字體的沖突
對于CSS定義字體和定義字體，我們都要注意以下問題，比如有以下字體設(shè)置：
網(wǎng)頁教學(xué)網(wǎng)
這時侯字體大小將以font-size: 200pt的定義來設(shè)置。但如果你在中加入size屬性，比如：
網(wǎng)頁教學(xué)網(wǎng)
這時侯，字體的大小以size的設(shè)置為準(zhǔn)，font-size: 200pt將不起作用。其它的屬性也是一樣。如果你無需動態(tài)字體，就利用HTML4.0的來定義字體，需要動態(tài)字體時，就需要使用CSS和JavaScritp來定義字體及引發(fā)事件。
3.定義CSS字體屬性類
一般我們在制作動態(tài)字體時，我們會首先利用CSS定義出頁面字體的整個屬性，然后在頁面中引用，而不用對每段文本進(jìn)行設(shè)置，這也是實現(xiàn)動態(tài)字體首先一步。
網(wǎng)頁教學(xué)網(wǎng)
在以上代碼中，“網(wǎng)頁教學(xué)網(wǎng)”兩個字引用了.main_2類定義的字體樣式。當(dāng)然你可以在中定義不同的字體樣式，以便頁面中根據(jù)不同字體加以引用。比如：
網(wǎng)頁教學(xué)網(wǎng)
網(wǎng)頁教學(xué)網(wǎng)
三.讓字體動起來
要讓字體動起來，我們可以利用本身CSS的事件或者讓JavaScript引發(fā)事件。
1.CSS引發(fā)事件
例一
link定義的是鏈接在頁面顯示的顏色(黑色)及鏈接沒有下劃線，visited定義的是單擊鏈接后的顏色(白色)，hover定義的是指向鏈接時的動態(tài)顏色。以上實例表示，當(dāng)指向鏈接“網(wǎng)頁教學(xué)網(wǎng)”后字體顏色從黑色變成藍(lán)色，并加下劃線，單擊鏈接后，鏈接顏色變成白色。
例二
網(wǎng)頁教學(xué)網(wǎng)
以上實例是利用內(nèi)聯(lián)改變字體樣式，當(dāng)鼠標(biāo)指向“網(wǎng)頁教學(xué)網(wǎng)”時字體因為定義了this.style.fontSize=200，這兩個字放大至200pt,當(dāng)鼠標(biāo)移開“網(wǎng)頁教學(xué)網(wǎng)”時，因定義了this.style.fontSize=100，這兩個字體縮小到100pt.
2.JavaScript引發(fā)事件
在上面的實例當(dāng)中，我們首先定義了兩個CSS類H1.italic和H1.bold，然后利用JavaScript腳本定義函數(shù) changeHead(),最后在需要的地方引發(fā)事件執(zhí)行定義好的函數(shù)。這里我們引發(fā)了兩個單擊事件onmouseover和onmouseout。在這里我還要說一點，因為你定義了H1兩個類H1.italic 和H1.bold，所以當(dāng)你在引用時，要首先設(shè)置class="bold"，表示字體以bold樣式出現(xiàn)。然后，移動鼠標(biāo)到“網(wǎng)頁教學(xué)網(wǎng)”上，觸發(fā)了事件一，移開“網(wǎng)頁教學(xué)網(wǎng)”時，觸發(fā)了事件二。
對于動態(tài)字體，我們還有很多方法來完善它。只是在考慮利用動態(tài)字體時，需要了解不同瀏覽器會產(chǎn)生不一樣的結(jié)果。這時侯，就需要不停測試，來找到一個兩全其美的方法。最后，希望你在看完這篇文章后，找一點CSS及JavaScript的資料來看，因為它們才是實現(xiàn)所有“夢想”的工具。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
重慶分公司
重慶分公司
