溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

HTML設(shè)計(jì)網(wǎng)頁中的字體的問題

發(fā)布時(shí)間：2020-07-10 20:34:06 來源：網(wǎng)絡(luò) 閱讀：424 作者：sjg11 欄目：web開發(fā)

一、HTML中定義字體

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

一般字體默認(rèn)的標(biāo)簽格式：<p>網(wǎng)頁教學(xué)網(wǎng)</p>

接下來，我們把字體設(shè)置為黑體或者宋體字樣式，它的標(biāo)簽如下：

<p><font face="黑體">網(wǎng)頁教學(xué)網(wǎng)</font></p>

在以上格式里，我們引出了字體的標(biāo)簽元素<font></font>.該標(biāo)簽具有下面三個(gè)屬性值：

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)瀏覽器訪問第一種字體失敗后，瀏覽器就會(huì)訪問第二種字體，依此類推。

下面是一個(gè)完整的字體格式：

<font face="黑體" size="2" color="#FFFFFF">網(wǎng)頁教學(xué)網(wǎng)</font>

HTML還提供了以下字體樣式標(biāo)簽：

1.六個(gè)標(biāo)題樣式

從h2到h7，如：<h2><font face="黑體" size="2">網(wǎng)頁教學(xué)網(wǎng)</font></h2>

2.字體風(fēng)格

斜體字：<em>網(wǎng)頁教學(xué)網(wǎng)</em>

粗體字：<strong>網(wǎng)頁教學(xué)網(wǎng)</strong>

斜體+粗體字：<strong><em>網(wǎng)頁教學(xué)網(wǎng)</em></strong>

3.定義文本

定義大字體

<big>網(wǎng)頁教學(xué)網(wǎng)</big>

定義小字體

<small>網(wǎng)頁教學(xué)網(wǎng)</small>或者<small><small><small>網(wǎng)頁教學(xué)網(wǎng)</small></small></small>

如果你在字體標(biāo)簽中設(shè)置了size="...",那么<big>標(biāo)簽將不起作用。

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

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

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

1.CSS定義字體的標(biāo)簽元素

font-family: 設(shè)置字體字族。

<span style="font-family: 黑體, 宋體(GB)">網(wǎng)頁教學(xué)網(wǎng)</span>

font-sytle:設(shè)置字體類型。

<span style="font-style: normal">網(wǎng)頁教學(xué)網(wǎng)</span>

font-weight:設(shè)置字體的字重。

<span style="font-weight: bold">網(wǎng)頁教學(xué)網(wǎng)</span>

font-size:設(shè)置字體大小。

<span style="font-size: 14pt">網(wǎng)頁教學(xué)網(wǎng)</span>

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

<span style="text-decoration: underline">網(wǎng)頁教學(xué)網(wǎng)</span>

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

<span style="font:normal bold 14pt 黑體">網(wǎng)頁教學(xué)網(wǎng)</span>

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

2.CSS定義字體和<font>定義字體的沖突

對于CSS定義字體和<font>定義字體，我們都要注意以下問題，比如有以下字體設(shè)置：

<span style="font-family: 宋體(KSC); font-size: 200pt"><font>網(wǎng)頁教學(xué)網(wǎng)</font></span>

這時(shí)侯字體大小將以font-size: 200pt的定義來設(shè)置。但如果你在<font>中加入size屬性，比如：

<span style="font-family: 宋體(KSC); font-size: 200pt"><font size="5">網(wǎng)頁教學(xué)網(wǎng)</font></span>

這時(shí)侯，字體的大小以size的設(shè)置為準(zhǔn)，font-size: 200pt將不起作用。其它的屬性也是一樣。如果你無需動(dòng)態(tài)字體，就利用HTML4.0的<font>來定義字體，需要?jiǎng)討B(tài)字體時(shí)，就需要使用CSS和JavaScritp來定義字體及引發(fā)事件。

3.定義CSS字體屬性類

一般我們在制作動(dòng)態(tài)字體時(shí)，我們會(huì)首先利用CSS定義出頁面字體的整個(gè)屬性，然后在頁面中引用，而不用對每段文本進(jìn)行設(shè)置，這也是實(shí)現(xiàn)動(dòng)態(tài)字體首先一步。

<HTML>
<head>
<style type="text/CSS">
.tt2 { font-family:"黑體"; font-size: 16px; font-style: normal; line-height: 17px }
</style>
</head>
<body>
<p class="tt2">網(wǎng)頁教學(xué)網(wǎng)</p>
</body>
</HTML>

在以上代碼中，“網(wǎng)頁教學(xué)網(wǎng)”兩個(gè)字引用了.main_2類定義的字體樣式。當(dāng)然你可以在<style></style>中定義不同的字體樣式，以便頁面中根據(jù)不同字體加以引用。比如：

<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">網(wǎng)頁教學(xué)網(wǎng)</p>
<p class="tt2">網(wǎng)頁教學(xué)網(wǎng)</p>
</body>
</HTML>

三.讓字體動(dòng)起來

要讓字體動(dòng)起來，我們可以利用本身CSS的事件或者讓JavaScript引發(fā)事件。

1.CSS引發(fā)事件

例一

<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://www.webjx.com/">網(wǎng)頁教學(xué)網(wǎng)</a></p>
</body>
</HTML>

link定義的是鏈接在頁面顯示的顏色(黑色)及鏈接沒有下劃線，visited定義的是單擊鏈接后的顏色(白色)，hover定義的是指向鏈接時(shí)的動(dòng)態(tài)顏色。以上實(shí)例表示，當(dāng)指向鏈接“網(wǎng)頁教學(xué)網(wǎng)”后字體顏色從黑色變成藍(lán)色，并加下劃線，單擊鏈接后，鏈接顏色變成白色。

例二

<HTML>
<head>
<title></title>
</head>
<body>
<p onmouseover="this.style.fontSize=200" onmouseout="this.style.fontSize=100">網(wǎng)頁教學(xué)網(wǎng)</p>
</body>
</HTML>

以上實(shí)例是利用內(nèi)聯(lián)改變字體樣式，當(dāng)鼠標(biāo)指向“網(wǎng)頁教學(xué)網(wǎng)”時(shí)字體因?yàn)槎x了this.style.fontSize=200，這兩個(gè)字放大至200pt,當(dāng)鼠標(biāo)移開“網(wǎng)頁教學(xué)網(wǎng)”時(shí)，因定義了this.style.fontSize=100，這兩個(gè)字體縮小到100pt.

2.JavaScript引發(fā)事件

<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>
<h2 id="H1_1" class="bold" </h2>
</body>
</HTML>

在上面的實(shí)例當(dāng)中，我們首先定義了兩個(gè)CSS類H1.italic和H1.bold，然后利用JavaScript腳本定義函數(shù) changeHead(),最后在需要的地方引發(fā)事件執(zhí)行定義好的函數(shù)。這里我們引發(fā)了兩個(gè)單擊事件onmouseover和onmouseout。在這里我還要說一點(diǎn)，因?yàn)槟愣x了H1兩個(gè)類H1.italic 和H1.bold，所以當(dāng)你在引用時(shí)，要首先設(shè)置class="bold"，表示字體以bold樣式出現(xiàn)。然后，移動(dòng)鼠標(biāo)到“網(wǎng)頁教學(xué)網(wǎng)”上，觸發(fā)了事件一，移開“網(wǎng)頁教學(xué)網(wǎng)”時(shí)，觸發(fā)了事件二。

對于動(dòng)態(tài)字體，我們還有很多方法來完善它。只是在考慮利用動(dòng)態(tài)字體時(shí)，需要了解不同瀏覽器會(huì)產(chǎn)生不一樣的結(jié)果。這時(shí)侯，就需要不停測試，來找到一個(gè)兩全其美的方法。最后，希望你在看完這篇文章后，找一點(diǎn)CSS及JavaScript的資料來看，因?yàn)樗鼈儾攀菍?shí)現(xiàn)所有“夢想”的工具。


向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手