服務(wù)熱線(xiàn)：
咨詢(xún)郵箱：
大同宏微信息在網(wǎng)頁(yè)設計中文本排版的技巧和細節
更新時(shí)間：2018-01-27 10:10:42 來(lái)源：大同網(wǎng)站建設 點(diǎn)擊：
字體大小與行距
在早期的網(wǎng)頁(yè)設計中，設計師為了追求中文字體的最佳視覺(jué)效果，經(jīng)常使用12px像素的字號。其實(shí)在現在看來(lái)，網(wǎng)站內容頁(yè)面用這么小的文字是不可取的，小字體的可讀性很差，沒(méi)有多少人愿意非常費力的盯著(zhù)屏幕去辨識那些小字。應該說(shuō)，將文字的字號設置成14px或者更大的16px會(huì )更加合理，瀏覽者閱讀起來(lái)也更加輕松。當然，如果條件允許，可以在文章閱讀頁(yè)面增加選擇字體大、中、小的連接。
文本之間的行距是非常重要的，因為擠在一起的文章會(huì )讓讀者看起來(lái)非常累，時(shí)不時(shí)的還會(huì )看錯行。在面對密密麻麻擠在一起的長(cháng)篇文字時(shí)，很少有人有耐心會(huì )看下去（至少我是如此）。一般情況下，文本的行距為1.5em與1.7em之間比較好，最好不要高于2em，否則過(guò)猶不及。
快速參考： CSS中使用font-size調整字體大小，例如：font-size:14px;
CSS中使用line-height調整行距，例如：line-height:1.6em;
段落間距
在段落之間，要保持足夠的間距才能讓讀者更容易識別，頁(yè)面也更整潔。面對沒(méi)有段落間距的頁(yè)面，讀者很可能會(huì )把幾個(gè)連在一起的小段路看成一個(gè)大段落，如果每個(gè)段落內容太多，很少有讀者有耐心讀完，因為互聯(lián)網(wǎng)上絕大多數的讀者瀏覽網(wǎng)站的方法并不是精讀，而是“掃描”。 我們通過(guò)修改p標簽的margin屬性或者padding屬性來(lái)修改段落間距。相比較而言，段落間距占據一行文字的距離還是比較合理的，所以我們通常設置段落間距為1em。我習慣使用“padding:0.5em 0 0.5em 0;”來(lái)設置段落間距，padding后設置的距離按照順序分別是段落的上方、右方、下方、左方間距。之所以在上方和下方各用一個(gè)0.5em而不是在下方用1em，是因為分別為上方和下方設置段落間距會(huì )讓段落在右邊框或背景的時(shí)候看起來(lái)更加均勻。
快速參考：p { padding:0.5em 0 0.5em 0; }
段落首行縮進(jìn) 在HTML中，半角空格是無(wú)法連續識別的，所以很多從網(wǎng)上找的文章都是沒(méi)有段落縮進(jìn)的，這樣從板式上看起來(lái)就不是太符合我們中文文章在生活中的習慣，我們習慣開(kāi)頭空兩個(gè)漢字的位置，而我們又懶得每個(gè)段落都去添上全角空格，那么我們可以使用段落首行縮進(jìn)解決問(wèn)題。使用text-indent即可實(shí)現段落的首行縮進(jìn)，如果我們想要首行空兩個(gè)漢字的位置，那么我們可以設置“text-indent:2em;”，這樣縮進(jìn)問(wèn)題就解決了。
快速參考：p { text-indent:2em; }
常用標簽定義
這個(gè)問(wèn)題前面已經(jīng)提到了，具體情況因人而異，這里舉個(gè)例子說(shuō)明一下。
假如我需要重新定義 em標簽，通常em標簽都是顯示為斜體的，我為了讓他更突出，給他加一個(gè)顏色定義“color:green;”，這樣我們在使用這些預定義標簽的時(shí)候會(huì )更加得心應手，也更加符合自己的需要。
快速參考：em { color:green; }
在網(wǎng)頁(yè)設計中文本排版的技巧和細節還有很多，此處所列的都是為幾個(gè)比較重要的部分。
上一篇：大同宏微網(wǎng)站建設致勝的法寶：細節決定成敗 下一篇：大同——這個(gè)城市的地方門(mén)戶(hù)網(wǎng)站蘊藏了多少機遇