在網(wǎng)頁制作時，我們需要控制網(wǎng)頁中字體的大小，顏色，粗細(xì)等，通過情況下，我們會使用以下的CSS樣式去控制這個字體的樣式：

字體的大?。篺ont-size:14px;

字體的顏色：color:#FFF;

字體的粗細(xì)：font-weight:bold;

　　合法的字體,更后我們有技術(shù)(瀏覽器支持),優(yōu)化web字體。我使用的一些更受歡迎的Google web的字體。

　　“Enriqueta” + “Georgia”

　　這是一個大膽和高對比度的風(fēng)格。注意到紅色突出顯示顏色可用于鏈接、子彈、按鈕等。

　　鏈接谷歌字體:

　　這種風(fēng)格的CSS代碼:

h1 {

color: #262626;

font-family: "Enriqueta", serif;

font-size: 44px;

line-height: 48px;

margin: 0 0 30px;

}

h2 {

color: #262626;

font-family: "Enriqueta", serif;

font-size: 32px;

font-weight: normal;

line-height: 42px;

margin: 0 0 24px;

padding: 12px 0 0;

}

h3 {

color: #c73036;

font-family: "Enriqueta", serif;

font-size: 18px;

font-weight: bold;

line-height: 24px;

margin: 0 0 24px;

padding: 12px 0 0;

text-transform: uppercase;

}

p {

color: #2f2f2f;

font-family: Georgia, serif;

font-size: 17px;

line-height: 24px;

margin: 0 0 24px;

}

.post-info {

color: #aaaaaa;

font-family: Georgia, serif;

font-size: 12px;

font-style: italic;

line-height: 12px;

padding: 24px 0;

}

.post-info a {

color: #c73036;

font-family: "Enriqueta", serif;

font-style: normal;

font-weight: bold;

text-decoration: none;

text-transform: uppercase;

}

　　“Playfair Display” + “Open Sans”

　　這是一個優(yōu)雅的風(fēng)格與無襯線和無襯線字體的組合。因?yàn)闃?biāo)題字體不是如此強(qiáng)大,我用顏色突出了它。如果你想提高你的網(wǎng)站的性能，你可以很容易地替換“Open Sans”與另一個無襯線字體。記住,每一個外部字體,都會增加你網(wǎng)站的加載時間。

　　鏈接谷歌字體：

　　這種風(fēng)格的CSS代碼:

h1 {

color: #c65c3f;

font-family: "Playfair Display", serif;

font-size: 40px;

font-weight: normal;

line-height: 48px;

margin: 0 0 26px;

}

h2 {

color: #363636;

font-family: "Playfair Display", serif;

font-size: 26px;

font-weight: normal;

line-height: 36px;

margin: 0 0 18px;

padding: 12px 0 0;

}

h3 {

color: #c65c3f;

font-family: "Open Sans", sans-serif;

font-size: 16px;

font-weight: bold;

line-height: 18px;

margin: 0 0 18px;

padding: 12px 0 0;

text-transform: uppercase;

}

p {

color: #363636;

font-family: "Open Sans", sans-serif;

font-size: 14px;

line-height: 18px;

margin: 0 0 18px;

}

.post-info {

color: #b8b8b8;

font-family: "Open Sans", sans-serif;

font-size: 12px;

font-weight: bold;

line-height: 12px;

margin: 0 0 18px;

text-transform: uppercase;

}

　　“Marvel” + “Lucida Sans”

　　這是一個現(xiàn)代和輕型排版風(fēng)格。保持完美的基線網(wǎng)格可能是困難的,因?yàn)椴煌臑g覽器渲染引擎,但你可以注意文本的示例引用與段落的行。

　　鏈接谷歌字體：

　　這種風(fēng)格的CSS代碼:

h1 {

border-bottom: 5px solid #f0f1e7;

color: #b2b888;

font-family: "Marvel", sans-serif;

font-size: 54px;

font-weight: normal;

line-height: 48px;

margin: 0 0 26px;

padding: 0 0 24px;

text-transform: uppercase;

}

h2 {

color: #b2b888;

font-family: "Marvel", sans-serif;

font-size: 28px;

font-weight: normal;

line-height: 30px;

margin: 0 0 18px;

padding: 12px 0 0;

text-transform: uppercase;

}

p {

color: #363636;

font-family: "Lucida Sans", sans-serif;

font-size: 16px;

line-height: 24px;

margin: 0 0 24px;

}

blockquote {

border-left: 5px solid #f0f1e7;

color: #b2b888;

float: right;

font-family: "Marvel", sans-serif;

font-size: 20px;

font-style: italic;

line-height: 24px;

margin: 0 0 24px 30px;

padding-left: 30px;

width: 150px;

}

　　結(jié)論

　　我希望這些字體風(fēng)格的例子對你有用。您也可以在未來項(xiàng)目中使用它們作為指導(dǎo)原則來創(chuàng)建自己的風(fēng)格。記住,避免用太多的字體和顏色，盡量保持簡潔。在網(wǎng)站建設(shè)中一定要時刻保持把控排版的整體風(fēng)格。