網站的核心是(shì)内容,用戶訪問網站最重要的目的就是(shì)要看網站的正文,所以,網頁的文本排版非常重要。 網頁的文本排版并不是(shì)僅僅在CSS裏設置個字體大小那麽簡單的,想要有好的排版,對細節要下一番功夫才行。
字體大小與行距
在早期的
網頁設計中,設計師爲了追求中文字體的最佳視覺效果,經常使用12px像素的字号。其實在現(xiàn)在看來,網站内容頁面用這麽小的文字是(shì)不可取的,小字體的可讀性很差,沒有多少人願意非常費(fèi)力的盯着屏幕去(qù)辨識那些小字。應該說,将文字的字号設置成14px或者更大的16px會更加合理,浏覽者閱讀起來也更加輕松。當然,如果條件允許,可以在文章閱讀頁面增加選擇字體大、中、小的連接。
文本之間的行距是(shì)非常重要的,因爲擠在一起的文章會讓讀者看起來非常累,時不時的還會看錯行。在面對密密麻麻擠在一起的長篇文字時,很少有人有耐心會看下去(qù)(至少我是(shì)如此)。一般情況下,文本的行距爲1.5em與1.7em之間比較好,最好不要高于2em,否則過猶不及。
快速參考: CSS中使用font-size調整字體大小,例如:font-size:14px;
CSS中使用line-height調整行距,例如:line-height:1.6em;
段落間距
在段落之間,要保持足夠的間距才能讓讀者更容易識别,頁面也更整潔。面對沒有段落間距的頁面,讀者很可能會把幾個連在一起的小段路看成一個大段落,如果每個段落内容太多,很少有讀者有耐心讀完,因爲互聯網上絕大多數的讀者浏覽網站的方法并不是(shì)精讀,而是(shì)“掃描”。 我們通過修改p标簽的margin屬性或者padding屬性來修改段落間距。相(xiàng)比較而言,段落間距占據一行文字的距離(lí)還是(shì)比較合理的,所以我們通常設置段落間距爲1em。我習慣使用“padding:0.5em 0 0.5em 0;”來設置段落間距,padding後設置的距離(lí)按照順序分别是(shì)段落的上方、右方、下方、左方間距。之所以在上方和下方各用一個0.5em而不是(shì)在下方用1em,是(shì)因爲分别爲上方和下方設置段落間距會讓段落在右邊框或背景的時候看起來更加均勻。
快速參考:p { padding:0.5em 0 0.5em 0; }
段落首行縮進 在HTML中,半角空格是(shì)無法連續識别的,所以很多從網上找的文章都是(shì)沒有段落縮進的,這樣從闆式上看起來就不是(shì)太符合我們中文文章在生活中的習慣,我們習慣開頭空兩個漢字的位置,而我們又(yòu)懶得每個段落都去(qù)添上全角空格,那麽我們可以使用段落首行縮進解決問題。使用text-indent即可實現(xiàn)段落的首行縮進,如果我們想要首行空兩個漢字的位置,那麽我們可以設置“text-indent:2em;”,這樣縮進問題就解決了。
快速參考:p { text-indent:2em; }
常用标簽定義
這個問題前面已經提到了,具體情況因人而異,這裏舉個例子說明一下。
假如我需要重新定義 em标簽,通常em标簽都是(shì)顯示爲斜體的,我爲了讓他更突出,給他加一個顔色定義“color:green;”,這樣我們在使用這些預定義标簽的時候會更加得心應手,也更加符合自己的需要。
快速參考:em { color:green; }
在
網頁設計中文本排版的技巧和細節還有很多,此處所列的都是(shì)爲幾個比較重要的部分。
大同市宏微信息技術有限公司主要從事技術開發、技術服務、技術轉讓;電腦圖文設計、制作;網站網頁設計、維護;廣告設計、制作及發布;公司主要技術人員(yuán)在
大同制作網站、大同建站、大同做網站、
大同網站建設、大同網站制作、
大同網頁設計、大同網絡開發、大同網站優化等方面有多年豐富的從業經驗。