網(wǎng)頁制作中文本排版的技巧和細(xì)節(jié)

從網(wǎng)站不同元素的關(guān)系而言，網(wǎng)站排版，可以分為“圖文的排版”“圖片的排版”“文字的排版”三類。本篇，我們主要總結(jié)文字的排版。

什么是文字排版？

文字的排版指的是字體的視面。這是一種以一種清晰美觀的方式安排文本的理念。優(yōu)秀的文字排版，可以用來傳達(dá)某種情緒或加強(qiáng)信息。為此，我們可以使用不同的字體和字體樣式，以及調(diào)整大小、字母和單詞之間的間距等等。

文字排版到底排什么？

要了解網(wǎng)站的文字排版，我們必須知道一些術(shù)語。這些術(shù)語也是文字排版的變量。

字體和字形。字體指的是某種字的樣式，如黑體字、宋體字，而字形指的是一個(gè)字體的形狀變化，例如加粗、斜體等。

易讀。一段文字是否容易閱讀，就是易讀性。一段文字的易讀性與字間距、行間距、字體大小、背景色、字體顏色，都存在較大的關(guān)系。

襯線和無襯線。襯線字體包括小的裝飾線或在字母筆畫的末端的“尾巴”，無襯線字體通常是由更簡潔的線條組成，字母的頂端沒有任何修飾。

層次感。層次感在排版中是必不可少的。它可以用來區(qū)分不同的內(nèi)容，幫助讀者立即理解哪些信息是最重要的。層次結(jié)構(gòu)可以使用大小(大或小)、寬度(厚或薄)和元素的位置來實(shí)現(xiàn)。例如，報(bào)紙文章的標(biāo)題通常比正文更大更突出，讓讀者通過瀏覽標(biāo)題就能了解文章的要點(diǎn)。

留白。 在圖形元素之間添加適量的空間有助于避免混亂和確保清晰。在文本周圍加上邊距或空白也會(huì)引起更多的注意，并有助于區(qū)分信息。

對齊。排版對齊指的是頁面上文本位置。包括左對齊、右對齊、中間對齊等。

網(wǎng)站設(shè)計(jì)文字排版指南

在了解了如上術(shù)語之后，成都建站公司創(chuàng)新互聯(lián)總結(jié)一些文字排版要點(diǎn)，僅供參考。

第一，找到與品牌匹配的字體。

不管是什么，找一種能表達(dá)你獨(dú)特個(gè)性的字體。為了為你的網(wǎng)站選擇最好的字體，首先收集一些你覺得合適的字體，然后在你更好地了解你需要的字體之后縮小字體范圍。

第二，保證字體的一致性。

當(dāng)你可以在同一個(gè)網(wǎng)站上合并兩到三種字體時(shí)，在相同的上下文中使用相同的字體。例如，如果一個(gè)頁面的標(biāo)題是宋體的粗體寫的，那么確保其他標(biāo)題也是一樣的。

第三，使其易讀。

使得網(wǎng)站選擇的字體，在各類設(shè)備中都是容易閱讀的。例如，如果你選擇的字體在PC機(jī)上是容易閱讀，也要確保其在手機(jī)上也容易閱讀。

第四，字體限制在兩三種之內(nèi)。

一個(gè)由多種字體組成的網(wǎng)站可能會(huì)顯得混亂和不連貫。相反，選擇不超過兩到三種字體，并在每一頁中始終使用它們。

第五，學(xué)會(huì)進(jìn)行搭配。

在為你的網(wǎng)站尋找好的字體搭配時(shí)，把你的品牌身份放在你決策的最重要位置。記住標(biāo)題用什么字體，長文本用什么字體。后者應(yīng)該是特別干凈和容易閱讀，選擇一個(gè)字體真正地表達(dá)你的品牌。

字體大小與行距

在早期的網(wǎng)頁設(shè)計(jì)中，設(shè)計(jì)師為了追求中文字體的好視覺效果，經(jīng)常使用12px像素的字號(hào)。其實(shí)在現(xiàn)在看來，網(wǎng)站內(nèi)容頁面用這么小的文字是不可取的，小字體的可讀性很差，沒有多少人愿意非常費(fèi)力的盯著屏幕去辨識(shí)那些小字。應(yīng)該說，將文字的字號(hào)設(shè)置成14px或者更大的16px會(huì)更加合理，瀏覽者閱讀起來也更加輕松。當(dāng)然，如果條件允許，可以在文章閱讀頁面增加選擇字體大、中、小的連接。

文本之間的行距是非常重要的，因?yàn)閿D在一起的文章會(huì)讓讀者看起來非常累，時(shí)不時(shí)的還會(huì)看錯(cuò)行。在面對密密麻麻擠在一起的長篇文字時(shí)，很少有人有耐心會(huì)看下去（至少我是如此）。一般情況下，文本的行距為1.5em與1.7em之間比較好，最好不要高于2em，否則過猶不及。

快速參考：

CSS中使用font-size調(diào)整字體大小，例如：font-size:14px;

CSS中使用line-height調(diào)整行距，例如：line-height:1.6em;

段落間距

在段落之間，要保持足夠的間距才能讓讀者更容易識(shí)別，頁面也更整潔。面對沒有段落間距的頁面，讀者很可能會(huì)把幾個(gè)連在一起的小段路看成一個(gè)大段落，如果每個(gè)段落內(nèi)容太多，很少有讀者有耐心讀完，因?yàn)榛ヂ?lián)網(wǎng)上絕大多數(shù)的讀者瀏覽網(wǎng)站的方法并不是精讀，而是“掃描”。

我們通過修改p標(biāo)簽的margin屬性或者padding屬性來修改段落間距。相比較而言，段落間距占據(jù)一行文字的距離還是比較合理的，所以我們通常設(shè)置段落間距為1em。我習(xí)慣使用“padding:0.5em 0 0.5em 0;”來設(shè)置段落間距，padding后設(shè)置的距離按照順序分別是段落的上方、右方、下方、左方間距。之所以在上方和下方各用一個(gè)0.5em而不是在下方用1em，是因?yàn)榉謩e為上方和下方設(shè)置段落間距會(huì)讓段落在右邊框或背景的時(shí)候看起來更加均勻。

快速參考：p { padding:0.5em 0 0.5em 0; }

段落首行縮進(jìn)

在HTML中，半角空格是無法連續(xù)識(shí)別的，所以很多從網(wǎng)上找的文章都是沒有段落縮進(jìn)的，這樣從板式上看起來就不是太符合我們中文文章在生活中的習(xí)慣，我們習(xí)慣開頭空兩個(gè)漢字的位置，而我們又懶得每個(gè)段落都去添上全角空格，那么我們可以使用段落首行縮進(jìn)解決問題。使用text-indent即可實(shí)現(xiàn)段落的首行縮進(jìn)，如果我們想要首行空兩個(gè)漢字的位置，那么我們可以設(shè)置“text-indent:2em;”，這樣縮進(jìn)問題就解決了。

快速參考：p { text-indent:2em; }
常用標(biāo)簽定義

這個(gè)問題前面已經(jīng)提到了，具體情況因人而異，這里舉個(gè)例子說明一下。假如我需要重新定義em標(biāo)簽，通常em標(biāo)簽都是顯示為斜體的，我為了讓他更突出，給他加一個(gè)顏色定義“color:green;”，這樣我們在使用這些預(yù)定義標(biāo)簽的時(shí)候會(huì)更加得心應(yīng)手，也更加符合自己的需要。

快速參考：em { color:green; }
網(wǎng)站的核心是內(nèi)容，用戶訪問網(wǎng)站最重要的目的就是要看網(wǎng)站的正文，所以，網(wǎng)頁的文本排版非常重要。網(wǎng)頁的文本排版并不是僅僅在CSS里設(shè)置個(gè)字體大小那么簡單的，想要有好的排版，對細(xì)節(jié)要下一番功夫才行。

新聞標(biāo)題：網(wǎng)頁制作中文本排版的技巧和細(xì)節(jié)
URL地址：http://www.muchs.cn/news29/128879.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、面包屑導(dǎo)航、云服務(wù)器、定制開發(fā)、服務(wù)器托管、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)