網(wǎng)頁(yè)字體在Frontpage2000制作網(wǎng)頁(yè)中的講解
互聯(lián)網(wǎng) 發(fā)布時(shí)間：2008-10-17 19:42:14 作者：佚名 
我要評(píng)論
我要評(píng)論 運(yùn)用Html，我們可以對(duì)字體的大小及字形進(jìn)行簡(jiǎn)單的修改，但要進(jìn)行統(tǒng)一地控制、創(chuàng)建特殊效果，就必須要用到css.它能讓您更有效地控制網(wǎng)頁(yè)外觀，并可以擴(kuò)充精確指定網(wǎng)頁(yè)元素位置，外觀以及創(chuàng)建特殊效果的能力?？紤]到用frontpage制作網(wǎng)頁(yè)的人較多，同時(shí)它對(duì)其他網(wǎng)頁(yè)編輯器的
運(yùn)用Html，我們可以對(duì)字體的大小及字形進(jìn)行簡(jiǎn)單的修改，但要進(jìn)行統(tǒng)一地控制、創(chuàng)建特殊效果，就必須要用到css.它能讓您更有效地控制網(wǎng)頁(yè)外觀，并可以擴(kuò)充精確指定網(wǎng)頁(yè)元素位置，外觀以及創(chuàng)建特殊效果的能力?？紤]到用frontpage制作網(wǎng)頁(yè)的人較多，同時(shí)它對(duì)其他網(wǎng)頁(yè)編輯器的使用者也有一定的借鑒作用，
因此，我就講解一下如何在frontpage2000中運(yùn)用css設(shè)置網(wǎng)頁(yè)字體。
我們可以用css設(shè)置出無(wú)數(shù)種網(wǎng)頁(yè)字體，但萬(wàn)變不離其宗，任何的變化都要遵循css的基本語(yǔ)法。因此我們先來(lái)了解一下css的基本語(yǔ)法，它是這樣子的：HTML 標(biāo)志 { 標(biāo)志屬性：屬性值；標(biāo)志屬性：屬性值；標(biāo)志屬性：屬性值；…… }。設(shè)置字體時(shí)，只要正確的更改字體屬性的屬性值，就可以達(dá)到目的。字體屬性共分五種：字族（font-family）、字體風(fēng)格（font-style）、字體變形（font-variant）、字體加粗（font-weight）、字體大?。╢ont-size），此外font屬性是一個(gè)總體屬性，可一一指定以上各種屬性和屬性值。它們的功能與屬性值如下：
1、字族（font-family）
功能：通過(guò)font-family指定字體類型用于改變HTML標(biāo)志或元素的字體，你可設(shè)置一個(gè)可用字體清單。瀏覽器由前向后選用字體。
其語(yǔ)法為：h1 {font-family: 字體類型，字體類型，字體類型}
2、字體風(fēng)格（font-style)
功能：使文本顯示為扁斜體或斜體等?屬性值：normal-普通、italic-斜體、oblique-偏斜體
語(yǔ)法為：h1{font-style:屬性值}
3、字體變形（font-variant）
功能：使文本中的小寫字母顯示為字體較小的大寫字母，常用于設(shè)計(jì)特殊的標(biāo)題。
屬性值：normal（普通）和small-caps（小型大寫字母）
語(yǔ)法為：h1{font-variant:屬性值}
4、字體加粗（font-weight）
功能：用于設(shè)置字體筆劃的粗細(xì)。
屬性值：正常度 - normal
相對(duì)度 - bold, bolder, light, lighter
漸變度 - 100, 200, 300, 400(相當(dāng)于normal), 500, 600, 700(相當(dāng)于 bold、 lighter、 bolder、以及數(shù)值100－900。
語(yǔ)法為：h1 < font-weight: 屬性值>
5、字體大?。╢ont-size）
功能：改變字體大小。
屬性值：長(zhǎng)度 - 用毫米(mm)，厘米(cm)，英寸(in)，磅(pt)，象素(px)，pica(pc)，ex(小寫字母x的高度)或em(字體高度)作為度量單位。
百分比 - 相對(duì)于其父元素字體大小的百分比。絕對(duì)尺寸分為xx-small, x-small, small, medium, large, x-large, xx-large七種，它們以各種字體的medium尺寸成比例縮放，每一級(jí)1.5倍。相對(duì)尺寸:有l(wèi)arger和smaller兩種，根據(jù)字體原來(lái)的大小來(lái)決定縮放以后的大小。百分比：把字體設(shè)置成原來(lái)尺寸的百分比值，可以任意指定數(shù)值。
語(yǔ)法為：{font-size:屬性值}
6、字體（font）
功能：簡(jiǎn)寫屬性，提供了對(duì)字體所有屬性進(jìn)行設(shè)置的快捷方法。
屬性值：字體屬性值為前面已列出的值，，內(nèi)容的順序?yàn)椋篺ont-style; font-variant; font-weight; font-size; line-height; font-family?？墒÷圆糠謱傩?，屬性值間用空格分開。
語(yǔ)法：{font:屬性值1 屬性值2 ...屬性值n}
下面我就給大家舉一個(gè)例子:把“網(wǎng)絡(luò)化”這三個(gè)字設(shè)置為加粗的字體首先在頁(yè)面打入“網(wǎng)絡(luò)化”這三個(gè)字，由于字體的粗細(xì)是由“字體加粗”這個(gè)屬性決定的，所以在進(jìn)入html編輯模式找到這些字后，就在它們的前后分別加上“字體加粗”及其屬性值的代碼，如：<span style="font-weight: 700">網(wǎng)絡(luò)化</span>
完成以上步驟后，“網(wǎng)絡(luò)化”這三個(gè)字就由普通字體變?yōu)榧哟值淖煮w。如果要修改為其他的字體，只要更換代碼中的字體屬性以及屬性值即可。
我曾在上面提到font屬性是一個(gè)總體屬性，并可以快捷地設(shè)置字體的所有屬性。以下這個(gè)例子就是給大家講解如何給文字定義多種屬性。我依然以“網(wǎng)絡(luò)化”這三個(gè)字作為設(shè)置對(duì)象，只是這次將它改為16磅的偏斜字體。設(shè)置的步驟與上面相似，但代碼要改為：<span style="font: oblique 16pt ">網(wǎng)絡(luò)化</span>
完成后，這三個(gè)字就同時(shí)具有了兩種屬性。比較以下兩副圖就可以看出修改前后的不同。
在這里還需要說(shuō)明的是雖然frontpage2000也可以更改字體的大小與字形，但它卻不能像css這樣精確地控制字體，如frontpage2000就不能將字體大小設(shè)置為16磅。如果將以上的代碼直接copy入html編輯頁(yè)面中，就會(huì)使<>""這幾個(gè)符號(hào)變?yōu)槠婀值淖址?，所以在?yīng)用中還是直接鍵入為好。
以上介紹的是如何在頁(yè)面中對(duì)某些文字的字體進(jìn)行設(shè)置，但如果要對(duì)整個(gè)或幾個(gè)頁(yè)面的字體進(jìn)行設(shè)置就要運(yùn)用到以下的方法：
一、當(dāng)只是要定義當(dāng)前網(wǎng)頁(yè)的樣式，可使用嵌入的樣式表。嵌入的樣式表是一種級(jí)聯(lián)樣式表，“嵌”在網(wǎng)頁(yè)的 <HEAD> 標(biāo)記符內(nèi)。嵌入的樣式表中的樣式只能在同一網(wǎng)頁(yè)上使用。
二、當(dāng)要在站點(diǎn)上所有或部份的網(wǎng)頁(yè)上一致地應(yīng)用相同樣式時(shí)，可使用外部樣式表。在一個(gè)或多個(gè)外部樣式表中定義樣式，并將它們鏈接到所有網(wǎng)頁(yè)，便能確保所有網(wǎng)頁(yè)外觀的一致性。如果您決定更改樣式，您只需在外部樣式表中作一次更改 ，則該更改就會(huì)反映到所有與該樣式表相鏈接的網(wǎng)頁(yè)上。通常外部樣式表以 .css 做為文件擴(kuò)展名，例如 1.css。
下面就以如何把網(wǎng)頁(yè)的所有文字設(shè)為流行的9磅字為例，給大家講解如何運(yùn)用以上兩種方法。
如果只設(shè)置當(dāng)前頁(yè)面，就要運(yùn)用嵌入的樣式表，這時(shí)只需進(jìn)入html編輯頁(yè)面，在<head>與</head>中加入以下代碼：
<style type="text/css">
BODY {FONT-SIZE: 9pt}
TH {FONT-SIZE: 9pt}
TD {FONT-SIZE: 9pt}
</style>
完成后即可見(jiàn)到效果。
如果要使一些網(wǎng)頁(yè)應(yīng)用相同的設(shè)置，就要使用外部樣式表。首先在frontpage中新建一個(gè)樣式表，具體步驟是依次點(diǎn)擊文件--新建--網(wǎng)頁(yè)，在彈出窗口中點(diǎn)擊樣式表，并選擇普通樣式表。然后，鍵入以下代碼：
BODY {FONT-SIZE: 9pt}
TH {FONT-SIZE: 9pt}
TD {FONT-SIZE: 9pt}
注意：如果直接拷貝進(jìn)去，會(huì)產(chǎn)生多余代碼。
將此文件保存在站點(diǎn)目錄下。編輯網(wǎng)頁(yè)時(shí)，點(diǎn)擊格式--樣式表鏈接，在彈出窗口中選擇以上文件即可。
上面所講述的僅僅是css的一些簡(jiǎn)單應(yīng)用，只要你能夠深入的了解css,并熟練的運(yùn)用它，就能將你的網(wǎng)頁(yè)創(chuàng)造得更加完美。
因此，我就講解一下如何在frontpage2000中運(yùn)用css設(shè)置網(wǎng)頁(yè)字體。
我們可以用css設(shè)置出無(wú)數(shù)種網(wǎng)頁(yè)字體，但萬(wàn)變不離其宗，任何的變化都要遵循css的基本語(yǔ)法。因此我們先來(lái)了解一下css的基本語(yǔ)法，它是這樣子的：HTML 標(biāo)志 { 標(biāo)志屬性：屬性值；標(biāo)志屬性：屬性值；標(biāo)志屬性：屬性值；…… }。設(shè)置字體時(shí)，只要正確的更改字體屬性的屬性值，就可以達(dá)到目的。字體屬性共分五種：字族（font-family）、字體風(fēng)格（font-style）、字體變形（font-variant）、字體加粗（font-weight）、字體大?。╢ont-size），此外font屬性是一個(gè)總體屬性，可一一指定以上各種屬性和屬性值。它們的功能與屬性值如下：
1、字族（font-family）
功能：通過(guò)font-family指定字體類型用于改變HTML標(biāo)志或元素的字體，你可設(shè)置一個(gè)可用字體清單。瀏覽器由前向后選用字體。
其語(yǔ)法為：h1 {font-family: 字體類型，字體類型，字體類型}
2、字體風(fēng)格（font-style)
功能：使文本顯示為扁斜體或斜體等?屬性值：normal-普通、italic-斜體、oblique-偏斜體
語(yǔ)法為：h1{font-style:屬性值}
3、字體變形（font-variant）
功能：使文本中的小寫字母顯示為字體較小的大寫字母，常用于設(shè)計(jì)特殊的標(biāo)題。
屬性值：normal（普通）和small-caps（小型大寫字母）
語(yǔ)法為：h1{font-variant:屬性值}
4、字體加粗（font-weight）
功能：用于設(shè)置字體筆劃的粗細(xì)。
屬性值：正常度 - normal
相對(duì)度 - bold, bolder, light, lighter
漸變度 - 100, 200, 300, 400(相當(dāng)于normal), 500, 600, 700(相當(dāng)于 bold、 lighter、 bolder、以及數(shù)值100－900。
語(yǔ)法為：h1 < font-weight: 屬性值>
5、字體大?。╢ont-size）
功能：改變字體大小。
屬性值：長(zhǎng)度 - 用毫米(mm)，厘米(cm)，英寸(in)，磅(pt)，象素(px)，pica(pc)，ex(小寫字母x的高度)或em(字體高度)作為度量單位。
百分比 - 相對(duì)于其父元素字體大小的百分比。絕對(duì)尺寸分為xx-small, x-small, small, medium, large, x-large, xx-large七種，它們以各種字體的medium尺寸成比例縮放，每一級(jí)1.5倍。相對(duì)尺寸:有l(wèi)arger和smaller兩種，根據(jù)字體原來(lái)的大小來(lái)決定縮放以后的大小。百分比：把字體設(shè)置成原來(lái)尺寸的百分比值，可以任意指定數(shù)值。
語(yǔ)法為：{font-size:屬性值}
6、字體（font）
功能：簡(jiǎn)寫屬性，提供了對(duì)字體所有屬性進(jìn)行設(shè)置的快捷方法。
屬性值：字體屬性值為前面已列出的值，，內(nèi)容的順序?yàn)椋篺ont-style; font-variant; font-weight; font-size; line-height; font-family?？墒÷圆糠謱傩?，屬性值間用空格分開。
語(yǔ)法：{font:屬性值1 屬性值2 ...屬性值n}
下面我就給大家舉一個(gè)例子:把“網(wǎng)絡(luò)化”這三個(gè)字設(shè)置為加粗的字體首先在頁(yè)面打入“網(wǎng)絡(luò)化”這三個(gè)字，由于字體的粗細(xì)是由“字體加粗”這個(gè)屬性決定的，所以在進(jìn)入html編輯模式找到這些字后，就在它們的前后分別加上“字體加粗”及其屬性值的代碼，如：<span style="font-weight: 700">網(wǎng)絡(luò)化</span>
完成以上步驟后，“網(wǎng)絡(luò)化”這三個(gè)字就由普通字體變?yōu)榧哟值淖煮w。如果要修改為其他的字體，只要更換代碼中的字體屬性以及屬性值即可。
我曾在上面提到font屬性是一個(gè)總體屬性，并可以快捷地設(shè)置字體的所有屬性。以下這個(gè)例子就是給大家講解如何給文字定義多種屬性。我依然以“網(wǎng)絡(luò)化”這三個(gè)字作為設(shè)置對(duì)象，只是這次將它改為16磅的偏斜字體。設(shè)置的步驟與上面相似，但代碼要改為：<span style="font: oblique 16pt ">網(wǎng)絡(luò)化</span>
完成后，這三個(gè)字就同時(shí)具有了兩種屬性。比較以下兩副圖就可以看出修改前后的不同。
在這里還需要說(shuō)明的是雖然frontpage2000也可以更改字體的大小與字形，但它卻不能像css這樣精確地控制字體，如frontpage2000就不能將字體大小設(shè)置為16磅。如果將以上的代碼直接copy入html編輯頁(yè)面中，就會(huì)使<>""這幾個(gè)符號(hào)變?yōu)槠婀值淖址?，所以在?yīng)用中還是直接鍵入為好。
以上介紹的是如何在頁(yè)面中對(duì)某些文字的字體進(jìn)行設(shè)置，但如果要對(duì)整個(gè)或幾個(gè)頁(yè)面的字體進(jìn)行設(shè)置就要運(yùn)用到以下的方法：
一、當(dāng)只是要定義當(dāng)前網(wǎng)頁(yè)的樣式，可使用嵌入的樣式表。嵌入的樣式表是一種級(jí)聯(lián)樣式表，“嵌”在網(wǎng)頁(yè)的 <HEAD> 標(biāo)記符內(nèi)。嵌入的樣式表中的樣式只能在同一網(wǎng)頁(yè)上使用。
二、當(dāng)要在站點(diǎn)上所有或部份的網(wǎng)頁(yè)上一致地應(yīng)用相同樣式時(shí)，可使用外部樣式表。在一個(gè)或多個(gè)外部樣式表中定義樣式，并將它們鏈接到所有網(wǎng)頁(yè)，便能確保所有網(wǎng)頁(yè)外觀的一致性。如果您決定更改樣式，您只需在外部樣式表中作一次更改 ，則該更改就會(huì)反映到所有與該樣式表相鏈接的網(wǎng)頁(yè)上。通常外部樣式表以 .css 做為文件擴(kuò)展名，例如 1.css。
下面就以如何把網(wǎng)頁(yè)的所有文字設(shè)為流行的9磅字為例，給大家講解如何運(yùn)用以上兩種方法。
如果只設(shè)置當(dāng)前頁(yè)面，就要運(yùn)用嵌入的樣式表，這時(shí)只需進(jìn)入html編輯頁(yè)面，在<head>與</head>中加入以下代碼：
<style type="text/css">
BODY {FONT-SIZE: 9pt}
TH {FONT-SIZE: 9pt}
TD {FONT-SIZE: 9pt}
</style>
完成后即可見(jiàn)到效果。
如果要使一些網(wǎng)頁(yè)應(yīng)用相同的設(shè)置，就要使用外部樣式表。首先在frontpage中新建一個(gè)樣式表，具體步驟是依次點(diǎn)擊文件--新建--網(wǎng)頁(yè)，在彈出窗口中點(diǎn)擊樣式表，并選擇普通樣式表。然后，鍵入以下代碼：
BODY {FONT-SIZE: 9pt}
TH {FONT-SIZE: 9pt}
TD {FONT-SIZE: 9pt}
注意：如果直接拷貝進(jìn)去，會(huì)產(chǎn)生多余代碼。
將此文件保存在站點(diǎn)目錄下。編輯網(wǎng)頁(yè)時(shí)，點(diǎn)擊格式--樣式表鏈接，在彈出窗口中選擇以上文件即可。
上面所講述的僅僅是css的一些簡(jiǎn)單應(yīng)用，只要你能夠深入的了解css,并熟練的運(yùn)用它，就能將你的網(wǎng)頁(yè)創(chuàng)造得更加完美。
相關(guān)文章
FrontPage網(wǎng)頁(yè)中怎么插入視頻? FrontPage視頻插入技巧
FrontPage網(wǎng)頁(yè)中怎么插入視頻？FrontPage創(chuàng)建的網(wǎng)頁(yè)想要插入視頻，該怎么插入視頻并調(diào)整視頻大小呢？下面我們就來(lái)看看FrontPage視頻插入技巧，需要的朋友可以參考下2021-03-05
FrontPage怎么自定義設(shè)置CSS外部樣式表?
FrontPage怎么自定義設(shè)置CSS外部樣式表？FrontPage中想要自己制作一個(gè)樣式表，該怎么自定義設(shè)置呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2019-05-22
FrontPage怎么制作作網(wǎng)頁(yè)下拉菜單?
FrontPage怎么制作作網(wǎng)頁(yè)下拉菜單？FrontPage制作網(wǎng)頁(yè)的時(shí)候，需要給網(wǎng)頁(yè)添加下拉菜單，該怎么制作這個(gè)效果呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2019-05-21
FrontPage怎么添加選項(xiàng)按鈕? FrontPage選項(xiàng)按鈕添加方法
FrontPage怎么添加選項(xiàng)按鈕？FrontPage制作網(wǎng)頁(yè)的時(shí)候，想要插入選項(xiàng)按鈕，該怎么插入呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2019-05-21
FrontPage怎么使用復(fù)選框? FrontPage復(fù)選框的用法
FrontPage怎么使用復(fù)選框？FrontPage制作網(wǎng)頁(yè)的時(shí)候，想啊喲使用復(fù)選框，該怎么使用復(fù)選框呢？下面我們就來(lái)看看FrontPage復(fù)選框的用法，需要的朋友可以參考下2019-05-20
FrontPage怎么創(chuàng)建留言簿網(wǎng)頁(yè)?
FrontPage怎么創(chuàng)建留言簿網(wǎng)頁(yè)？FrontPage中想要制作一個(gè)網(wǎng)頁(yè)，該怎么制作留言簿呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2019-05-20
FrontPage框架怎么拆分與合并？FrontPage中創(chuàng)建的框架網(wǎng)頁(yè)想要對(duì)王佳進(jìn)行拆分和合并操作，該怎么辦呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2019-04-30
FrontPage怎么啟用超鏈接翻轉(zhuǎn)效果？FrontPage給網(wǎng)頁(yè)添加超鏈接以后，想要添加動(dòng)態(tài)效果，比如鼠標(biāo)鼠標(biāo)懸或單擊超鏈接時(shí)，鏈接外觀所產(chǎn)生的變化效果，下面我們就來(lái)看看詳細(xì)的2019-04-17
FrontPage超鏈接默認(rèn)顏色怎么修改？FrontPage中想要設(shè)置超鏈接默認(rèn)的顏色，比如已訪問(wèn)的超鏈接和當(dāng)前超鏈接的顏色，該怎么設(shè)置呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友2019-04-17
這篇文章主要介紹了詳解基于瀏覽器同源策略的幾種跨域方式的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-03
