對於中文字於網頁使用 CSS 排版建議參數

中文字在網頁排版跟英文不一樣, 看起來的感覺也不一樣~ 之前也蠻多人有做這種研究, 不過此篇設定簡單, 但是在我的 Blog 看起來又蠻舒適的, 所以就套用上去了~

對於中文字於網頁使用 CSS 排版建議參數

詳見此篇: 簡單做好中文排版

文章有建議下述參數, 詳細原因請回去看本文. (文章對字型部分沒有結論, 就不加入)

p {
   line-height: 1.7em;
   text-align: justify;
   text-justify: ideographic;
   margin: 0;
   text-indent: 2em;
   margin-after: 0.5em;
   word-break: break-all;
}
em {font-style: normal;}

但是應用在 Blog 上, 我的 ul、ol 用的不少, 但是因為 p 的 text-indent 會造成排起來有點怪怪的, 於是加上下述參數:

ul, ol {margin-left:4em;}

另外, 我自己對中文字全部連在一起時, 有時候太近看起來不舒服, 所以會給一點點間距:

p {letter-spacing: 0.2px;}

完整設定 (.entry-content 是只有針對文章內容做設定, 間距部份就不只有針對 p, 而是對全部去設定了)

.entry-content p {
   line-height: 1.7em;
   text-align: justify;
   text-justify: ideographic;
   margin: 0;
   text-indent: 2em;
   margin-after: 0.5em;
   word-break: break-all;
}
.entry-content em {font-style: normal;}
.entry-content ul, ol {margin-left:4em;}
.entry-content {letter-spacing: 0.2px;}

這樣子閱讀起來舒服多了~