您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計教程 >> 設(shè)計理論 >> 瀏覽設(shè)計教程

網(wǎng)頁設(shè)計中最重要的細(xì)節(jié)之一——字體(6)

t-size、line-height、letter-spacing、word-spacing、text-align、text-decoration。

font-family:用于定義字體,上面有演示不多說。更詳細(xì)的資料請看:font-family。

font-style:用于定義字體的樣式,包括正常、斜體、傾斜等,對應(yīng)的屬性值為:normal – 文本正常顯示、italic – 文本斜體顯示、oblique – 文本傾斜顯示。

font-weight:用于定義文字的粗細(xì),詳細(xì)的屬性值請看:font-weight。

font-size:設(shè)置字體大小,不再贅述。

line-height:用于設(shè)置文字中的行間距,合適的行間距對用戶閱讀帶來良好體驗。同時還可以用于垂直布局單行文字。

letter-spacing:設(shè)置文字之間的字間距,使文字之間的距離增大或者減小。

word-spacing:用于調(diào)整單詞的間距。

text-align:用來對齊文字,例如左對齊、右對齊、居中對齊等。

text-decoration:用來修飾一段文本,例如添加下劃線等。常對 a 標(biāo)簽使用這個屬性消除其默認(rèn)的下劃線。

上面是與字體相關(guān),比較常用的 CSS 屬性,還有其他更加具體的,可以參考網(wǎng)上的資料,推薦 W3school 上面的有關(guān)字體的資料。

使用在線字體

在 CSS3 中,引入了一個非常強大而且實用的功能來面對上面的字體選擇問題。傳統(tǒng)的字體選擇,要你的操作系統(tǒng)中安裝相應(yīng)字體才可以顯示。如果你在網(wǎng)頁作品中,使用了其他的創(chuàng)意字體,那么你需要生成相應(yīng)的文字圖片來替換,否則不會顯示。CSS3 中的這個功能,就是 Web Fonts,網(wǎng)頁中可以使用安裝在服務(wù)器端的字體。你可以將選擇好的字體,上傳到服務(wù)器中,然后使用 CSS3 新增的 @font-face 屬性,來調(diào)用服務(wù)器上的字體,然后來渲染網(wǎng)頁。

支持 CSS3 這一功能的瀏覽器,會首先找到服務(wù)器上的字體,然后下載下來進(jìn)行渲染。這樣就徹底解決了本地操作系統(tǒng)中,沒有對應(yīng)字體的問題。關(guān)于 @font-face 的具體使用方法,由于比較多,在本文不再贅述,請大家自行百度之:@font-face的使用方法。

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請注明出處,素材資料僅供個人學(xué)習(xí)與參考,請勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/di1286.html
為什么蘋果官網(wǎng)的設(shè)計如此吸引人?
2013年10大網(wǎng)頁設(shè)計趨勢
圖趣網(wǎng)微信
建議反饋
×