html網(wǎng)頁的字體怎么設(shè)置好看

想用CSS設(shè)置字體樣式，首先得了解CSS 字體屬性，CSS 字體屬性可以定義文本的字體系列、大小、加粗、風(fēng)格（如斜體）和變形（如小型大寫字母）。

如下：

font 簡(jiǎn)寫屬性。作用是把所有針對(duì)字體的屬性設(shè)置在一個(gè)聲明中。

font-family 設(shè)置字體系列。

font-size 設(shè)置字體的尺寸。

font-size-adjust 當(dāng)首選字體不可用時(shí)，對(duì)替換字體進(jìn)行智能縮放。（CSS2.1 已刪除該屬性。）

font-stretch 對(duì)字體進(jìn)行水平拉伸。（CSS2.1 已刪除該屬性。）

font-style 設(shè)置字體風(fēng)格。

font-variant 以小型大寫字體或者正常字體顯示文本。

font-weight 設(shè)置字體的粗細(xì)。

如果你希望文檔使用一種字體可以這樣

body {font-family: sans-serif;}

指定字體系列,如下，這樣所有h1標(biāo)簽里面的字體就定義好了

h1 {font-family: Georgia;}

其中他們優(yōu)先級(jí)是 h1body

注意：如果讀者沒有安裝 Georgia字體，會(huì)默認(rèn)為其他字體，如果您對(duì)字體非常熟悉，也可以為給定的元素指定一系列類似的字體。要做到這一點(diǎn)，需要把這些字體按照優(yōu)先順序排列，然后用逗號(hào)進(jìn)行連接：

p {font-family: Times, TimesNR, 'New Century Schoolbook',

Georgia, 'New York', serif;}

如果把一個(gè) font-family 屬性放在 HTML 的 style 屬性中，則需要使用該屬性本身未使用的那種引號(hào)如：

p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia,

'New York', serif;".../p

字體風(fēng)格

font-style 屬性最常用于規(guī)定斜體文本。

該屬性有三個(gè)值：

?normal - 文本正常顯示

?italic - 文本斜體顯示

?oblique - 文本傾斜顯示

實(shí)例

p.normal {font-style:normal;}

p.italic {font-style:italic;}

p.oblique {font-style:oblique;}

字體變形

font-variant 屬性可以設(shè)定小型大寫字母。

小型大寫字母不是一般的大寫字母，也不是小寫字母，這種字母采用不同大小的大寫字母。

實(shí)例

p {font-variant:small-caps;}

字體加粗

font-weight 屬性設(shè)置文本的粗細(xì)。

使用 bold 關(guān)鍵字可以將文本設(shè)置為粗體。

關(guān)鍵字 100 ~ 900 為字體指定了 9 級(jí)加粗度。如果一個(gè)字體內(nèi)置了這些加粗級(jí)別，那么這些數(shù)字就直接映射到預(yù)定義的級(jí)別，100 對(duì)應(yīng)最細(xì)的字體變形，900 對(duì)應(yīng)最粗的字體變形。數(shù)字 400 等價(jià)于 normal，而 700 等價(jià)于 bold。

如果將元素的加粗設(shè)置為 bolder，瀏覽器會(huì)設(shè)置比所繼承值更粗的一個(gè)字體加粗。與此相反，關(guān)鍵詞 lighter 會(huì)導(dǎo)致瀏覽器將加粗度下移而不是上移。

實(shí)例

p.normal {font-weight:normal;}

p.thick {font-weight:bold;}

p.thicker {font-weight:900;}

字體大小

font-size 屬性設(shè)置文本的大小。

有能力管理文本的大小在 web 設(shè)計(jì)領(lǐng)域很重要。但是，您不應(yīng)當(dāng)通過調(diào)整文本大小使段落看上去像標(biāo)題，或者使標(biāo)題看上去像段落。

請(qǐng)始終使用正確的 HTML 標(biāo)題，比如使用 h1 - h6 來標(biāo)記標(biāo)題，使用 p 來標(biāo)記段落。

font-size 值可以是絕對(duì)或相對(duì)值。

絕對(duì)值：

?將文本設(shè)置為指定的大小

?不允許用戶在所有瀏覽器中改變文本大小（不利于可用性）

?絕對(duì)大小在確定了輸出的物理尺寸時(shí)很有用

相對(duì)大?。?/p>

?相對(duì)于周圍的元素來設(shè)置大小

?允許用戶在瀏覽器改變文本大小

注意：如果您沒有規(guī)定字體大小，普通文本（比如段落）的默認(rèn)大小是 16 像素 (16px=1em)。

使用像素來設(shè)置字體大小

通過像素設(shè)置文本大小，可以對(duì)文本大小進(jìn)行完全控制：

實(shí)例

h1 {font-size:60px;}

h2 {font-size:40px;}

p {font-size:14px;}

css字體樣式有哪些

非常多，可以設(shè)置系統(tǒng)中的任何一種字體樣式，Windows自帶中文字體：宋體、黑體、楷體(GB2312)、仿宋(GB2312)、微軟雅黑等。

Windows自帶英文字體：Arial、Verdana、 Geneva、 sans-seri、Times等。

如何用css設(shè)置網(wǎng)頁字體[多圖]

最好是使用大多數(shù)人的機(jī)器上可能有的常見的truetype字體。

Arial、Times Roman、Courier、Verdana和Century Gothic是常見的字體，中文里面Windows自帶宋體、黑體及楷體。

如果你使用不常見的字體，不要忘記為沒有此字體的瀏覽器指定替代的字體。

通過css設(shè)置font-family來制定字體集，瀏覽器可以順序查找使用你制定的一系列字體，讓你的頁面看起來還不錯(cuò)。

?裝飾性字體組好只用于標(biāo)題。然后用css的font-family指定缺省字體。

?不要過分地使用字體，在同一頁面中不要使用太多不同的字體。

通常使用兩種字體就足夠了：一種用于標(biāo)題，一種由于文本。

某些字體組合常常無法工作。例如，不要再同一頁面中使用script和斜體字體，不要在同一頁面中使用一種以上的裝飾性字體。

?嘗試使用相同字型的不同濃淡度使頁面更有趣。

如果你的頁面相當(dāng)乏味，沒有圖像，那么嘗試設(shè)置促體的濃淡度（通過css的font-weight特性），這會(huì)使頁面更生動(dòng)。使用不用的濃淡度不僅可以使頁面更吸引人，它還是組織信息的最有效的方法之一。

?不要在同一頁面中放兩種sans serif字體，除非你確實(shí)知道在做什么。

如果你要在同一頁面中使用兩種字體，它們應(yīng)該來自兩種不同的字型類別。

?不同的操作系統(tǒng)及瀏覽器中pt字會(huì)不一樣大。

pt（磅）最早是用于印刷的字號(hào)，在windows和mac os里面，相同的pt值會(huì)對(duì)應(yīng)不同的px（像素）值。唯一可靠的單位，就是px。

?設(shè)置字號(hào)的時(shí)候，要考慮好來你的網(wǎng)站的客人會(huì)是什么樣的人？

如果你設(shè)置了固定的字號(hào)，比如12px，那么，對(duì)于普通瀏覽者來說，這是沒什么問題的，但是如果你的網(wǎng)站的瀏覽者包括老人和視力有問題的人群，那么這個(gè)尺寸就太小了，最好提供個(gè)他們可以選擇頁面字體的權(quán)利。

CSS中設(shè)定字體如何設(shè)定為微軟雅黑 Bold字體？

以在css中設(shè)置文本字體為“微軟雅黑”。具體方法和CSS代碼如下：

.body {font-family:"Microsoft YaHei",微軟雅黑,"Microsoft JhengHei",華文細(xì)黑,STHeiti,MingLiu}

之所以加上中文名“微軟雅黑”是為了兼容opera。Microsoft JhengHei為微軟正黑體，STHeiti為華文黑體，寫這么多字體是為了預(yù)防萬一用戶的電腦上沒有微軟正黑體，那么CSS可以從后邊幾種字體中選擇一個(gè)類似的字體，記得11px下的MingLiu中文有著不凡的效果。

box1{font-family:"微軟雅黑,宋體";font-weight:bold}這個(gè)字體。css設(shè)定的字體,?只有系統(tǒng)里面有這個(gè)字體的才能看到。?比如xp系統(tǒng)的用戶,?一般都沒有微軟雅黑,?你css使用了微軟雅黑。

但是用戶只能看到系統(tǒng)默認(rèn)的宋體.?所以不要那么麻煩.?要想用的只要在你的font文件夾找到字體默認(rèn)名字就行了.

css好看的字體樣式

style type="text/css"

.aa{ width:200px; height:44px; border:0; background-image:url(img1.png); }

.aa:active{ background-image:url(img2.png);}

/style

input type="button" class="aa" value=""/

IE6需要另外插一張類庫