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

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

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

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

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

View Raw Code?
  1. p {
  2. line-height: 1.7em;
  3. text-align: justify;
  4. text-justify: ideographic;
  5. margin: 0;
  6. text-indent: 2em;
  7. margin-after: 0.5em;
  8. word-break: break-all;
  9. }
  10. em {font-style: normal;}

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

View Raw Code?
  1. ul, ol {margin-left:4em;}

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

View Raw Code?
  1. p {letter-spacing: 0.2px;}

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

View Raw Code?
  1. .entry-content p {
  2. line-height: 1.7em;
  3. text-align: justify;
  4. text-justify: ideographic;
  5. margin: 0;
  6. text-indent: 2em;
  7. margin-after: 0.5em;
  8. word-break: break-all;
  9. }
  10. .entry-content em {font-style: normal;}
  11. .entry-content ul, ol {margin-left:4em;}
  12. .entry-content {letter-spacing: 0.2px;}

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

作者: Tsung

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活.

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料。