網頁制作中文本排版的技巧和細節(jié)

從網站不同元素的關系而言，網站排版，可以分為“圖文的排版”“圖片的排版”“文字的排版”三類。本篇，我們主要總結文字的排版。

什么是文字排版？

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

文字排版到底排什么？

要了解網站的文字排版，我們必須知道一些術語。這些術語也是文字排版的變量。

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

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

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

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

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

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

網站設計文字排版指南

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

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

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

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

當你可以在同一個網站上合并兩到三種字體時，在相同的上下文中使用相同的字體。例如，如果一個頁面的標題是宋體的粗體寫的，那么確保其他標題也是一樣的。

第三，使其易讀。

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

第四，字體限制在兩三種之內。

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

第五，學會進行搭配。

在為你的網站尋找好的字體搭配時，把你的品牌身份放在你決策的最重要位置。記住標題用什么字體，長文本用什么字體。后者應該是特別干凈和容易閱讀，選擇一個字體真正地表達你的品牌。

字體大小與行距

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

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

快速參考：

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

CSS中使用line-height調整行距，例如：line-height:1.6em;

段落間距

在段落之間，要保持足夠的間距才能讓讀者更容易識別，頁面也更整潔。面對沒有段落間距的頁面，讀者很可能會把幾個連在一起的小段路看成一個大段落，如果每個段落內容太多，很少有讀者有耐心讀完，因為互聯網上絕大多數的讀者瀏覽網站的方法并不是精讀，而是“掃描”。

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

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

段落首行縮進

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

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

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

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

新聞標題：網頁制作中文本排版的技巧和細節(jié)
URL地址：http://www.bm7419.com/news29/128879.html

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

廣告

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