做網站知識

網頁文本排版:段落首行縮進/調好字體大小與行距

新聞資訊 發布時間2013.10.21.瀏覽數:2037

【網頁文本排版的技巧和細節】 字體大小與行距 在早期的網頁設計中,設計師為了追求中文字體的最佳視覺效果,經常使用12px像素的字號。其實在現在看來,網站內容頁面用這么小的文字是不可取的,小字體的可讀性很差,沒有多少人愿意非常費力的盯著屏幕去辨識那些小字。應該說,將文字的字號設置成14px或者更大的16px會更......佛山做網站www.yfmwa.co三行網絡公司為您詳細介紹 - 請往下閱讀》

網頁文本排版的技巧和細節

網頁文本排版的技巧和細節

字體大小與行距
在早期的網頁設計中,設計師為了追求中文字體的最佳視覺效果,經常使用12px像素的字號。其實在現在看來,網站內容頁面用這么小的文字是不可取的,小字體的可讀性很差,沒有多少人愿意非常費力的盯著屏幕去辨識那些小字。應該說,將文字的字號設置成14px或者更大的16px會更加合理,瀏覽者閱讀起來也更加輕松。當然,如果條件允許,可以在文章閱讀頁面增加選擇字體大、中、小的連接。
文本之間的行距是非常重要的,因為擠在一起的文章會讓讀者看起來非常累,時不時的還會看錯行。在面對密密麻麻擠在一起的長篇文字時,很少有人有耐心會看下去(至少我是如此)。一般情況下,文本的行距為1.5em與1.7em之間比較好,最好不要高于2em,否則過猶不及。
快速參考:
CSS中使用font-size調整字體大小,例如:font-size:14px;
CSS中使用line-height調整行距,例如:line-height:1.6em;

3
段落首行縮進
在HTML中,半角空格是無法連續識別的,所以很多從網上找的文章都是沒有段落縮進的,這樣從板式上看起來就不是太符合我們中文文章在生活中的習慣,我們習慣開頭空兩個漢字的位置,而我們又懶得每個段落都去添上全角空格,那么我們可以使用段落首行縮進解決問題。使用text-indent即可實現段落的首行縮進,如果我們想要首行空兩個漢字的位置,那么我們可以設置“text-indent:2em;”,這樣縮進問題就解決了。
快速參考:p { text-indent:2em; }
4
常用標簽定義
這個問題前面已經提到了,具體情況因人而異,這里舉個例子說明一下。假如我需要重新定義em標簽,通常em標簽都是顯示為斜體的,我為了讓他更突出,給他加一個顏色定義“color:green;”,這樣我們在使用這些預定義標簽的時候會更加得心應手,也更加符合自己的需要。
快速參考:em { color:green; }

2
段落間距
在段落之間,要保持足夠的間距才能讓讀者更容易識別,頁面也更整潔。面對沒有段落間距的頁面,讀者很可能會把幾個連在一起的小段路看成一個大段落,如果每個段落內容太多,很少有讀者有耐心讀完,因為互聯網上絕大多數的讀者瀏覽網站的方法并不是精讀,而是“掃描”。
我們通過修改p標簽的margin屬性或者padding屬性來修改段落間距。相比較而言,段落間距占據一行文字的距離還是比較合理的,所以我們通常設置段落間距為1em。我習慣使用“padding:0.5em 0 0.5em 0;”來設置段落間距,padding后設置的距離按照順序分別是段落的上方、右方、下方、左方間距。之所以在上方和下方各用一個0.5em而不是在下方用1em,是因為分別為上方和下方設置段落間距會讓段落在右邊框或背景的時候看起來更加均勻。
快速參考:p { padding:0.5em 0 0.5em 0; }

佛山做網站公司選三行網絡—— “匠心精琢、凝聚經典”是三行網絡公司的設計理念,每一件作品無不是三行網絡公司設計團隊的傾力傾心之作。無論策劃、創意還是視覺設計,三行網絡公司設計團隊均力求完美,而這樣的完美不僅是視覺的享受,更是商業價值、品牌理念與視覺的共榮之作!
《網頁文本排版:段落首行縮進/調好字體大小與行距》此文由三行網絡公司原創,轉載請保留原文鏈接,謝謝!

【關鍵詞標簽】網頁文本排版的技巧和細節    (PC+手機)響應式網站建設

做網站熱線/微信:15989229398


匠心打造精品,用心成就經典!攜手客戶共創雙贏!
? Copyright 2008-2019 廣州三行網絡科技有限公司
粵ICP備案號:09210325

排列5走势图