中文CSS 排版原則指南| 夏木樂網頁設計

由於網路上的CSS 排版探討大多著重於主流的西方拉丁語系文字，其在文字大小、行距等各方面並不完全適用中文文字。

故本文件提供一個易讀且清晰的常用 ... 服務 服務項目 專業優勢與特色 服務簡報 解決方案 BrandDesign 品牌形象網站 多功能客製化網站 ECommerce 購物車商城 B2B2C多賣家商城 Development 硬體公司官網 線上課程網站 手機App開發 特殊規格網站開發 作品案例 設計資源 網站知識 分享空間(Medium) 知識頻道(Blog) 我要做網站 服務 服務項目 專業優勢與特色 服務簡報 解決方案 BrandDesign 品牌形象網站 多功能客製化網站 ECommerce 購物車商城 B2B2C多賣家商城 Development 硬體公司官網 線上課程網站 手機App開發 特殊規格網站開發 作品案例 設計資源 網站知識 分享空間(Medium) 知識頻道(Blog) 我要做網站 中文CSS排版原則指南 經驗分享 Simular 2020-10-26 由於網路上的CSS排版探討大多著重於主流的西方拉丁語系文字，其在文字大小、行距等各方面並不完全適用中文文字。

故本文件提供一個易讀且清晰的常用中文網頁排版指南，供網頁設計師參考。

1.注意事項 本文件僅提供HTML/CSS統一化排版樣式之標準建議，並不規範HTML結構，中英文之間是否空格等細部規定。

另外考量到我們常常是以Bootstrap佈景為基礎開發網站，本文件著重在如何將以有的佈景調整成合適的樣式。

2.字體大小 2.1.基礎Body字體大小 由於近年來FullHD螢幕逐漸普及，以1080p觀看網站的使用者越來越多，網站的字體大小建議以 html,body{font-size:16px} 作為基準值。

目前網路上最普遍使用的Bootstrap4代預設採用16px，3代則是14px，如果您使用的是3代，建議自行覆蓋body的字體大小。

2.2.標題字體大小 當網站套用模板時，或者設計師獨立設計網站版面時，可能對標題大小有自己的想法，因此本文件不規範全域的標題大小。

但另外在文章字體中有所建議。

Bootstrap3中文標題大小是用px寫死的，建議設計師還是要自己把h1~h6的大小重設一遍 2.3.選單、Label、Badge等字體大小 通常選單與特定UI元素的字體會稍小。

一般來說建議以Body字體的百分比約略縮小，當有必要調整基礎字體大小時，所有文字都會根據比例一起變動。

若設計師考量到某些元素內的字體變更大小會影響到排版，也可以用像素 px 當作單位。

3.字型 字型部分，將以未載入Webfont作為基準，提供適用於Windows&Mac作業系統的安全字體建議。

3.1.基本常用字體 在Mac中，目前最常用的中文字體為蘋方TC，再來是黑體TC，要注意的是Mac上的CSS通常必須要把字體名稱寫成英文，所以會是 PingFangTC 與 HeitiTC。

(你想支援更古老的Mac別忘了 LiHeiPro) Windows上不意外的萬年微軟正黑體，你不用特別設定新細明體，因為當所有字體都抓不到時，最後就是回到新細明體來顯示。

(Windows上字型必須用中文名稱) 當然別忘記預設的 sans-serif 在最後面。

故以下是我們常用的字體順序: font-family:'{主要的英文字型}','PingFangTC','HeitiTC','微軟正黑體',sans-serif; 開頭的英文字型可以任意搭配，或是用GoogleWebfont皆可。

若要適應中國網站，則建議加上雅黑體: font-family:'{主要的英文字型}','PingFangTC','HeitiTC','MicrosoftJhengHei','MicrosoftYaHei',sans-serif; 3.2.標題字體 標題字體在Mac上可以加上例如蘭亭黑體 LantingHeiTC 之類的額外選擇。

由於中文的標題與內文區隔較不明顯，建議在中文網頁上，通常要選比較粗的字體。

若字型一樣，則嘗試加粗。

在Windows上沒有太多選擇，依然是微軟正黑體然後加粗。

不過可以考慮採用一個蠻好看的字體: Adobe繁黑體，在Windows上顯示的平滑效果不輸給Mac，缺點是有安裝Adobe全套的使用者才看的到。

(注意Adobe繁黑體在IE顯示上Baseline會跑掉) 3.3.按鈕與UI元素 某些布景內的按鈕、Label等許多UI元素都有另外寫字體樣式，要記得除了 html,body 以外也要替這些UI元素設定好字體以統一風格。

3.4.LESS編寫建議 若全站字體變動不大，建議在LESS或SCSS的開頭就寫好相關變數，之後網站內只要套用變數即可。

$main-font:'{主要的英文字型}','PingFangTC','HeitiTC','微軟正黑體',sans-serif; $title-font:'{標題的英文字型}','PingFangTC','HeitiTC','Adobe繁黑體Std','AdobeFanHeitiStd-Bold','微軟正黑體',sans-serif; 使用方式 .article-content.btn{   font-family:$main-font; } 4.字重 原則上維持預設即可，設計師可根據設計需求調整字重。

4.1.Windows注意事項 Windows10以後，字重300以下的字體會出現渲染模糊，應確認設定成400以上。

下圖是字重300 下圖是字重400 會明顯看到300的文字難以閱讀。

5.行距 Bootstrap預設行距較適合英文，對中文來說太窄。

中文文字行距建議設為 150% 到 175%，根據設計所需要的空間感來定。

(可用 1.5 來表示) 下圖為字距範例圖片: 5.1.Feature介紹行距 首頁或是LandingPage的介紹文字，則可以採用 175% 到 200% 行距，建立空間感。

5.2.標題行距 採用Bootstrap時，其沒有替h1~h6設定基本的行距，若碰到兩行標題時會黏在一起。

可考慮預設為1.3-1.5之間的行距。

另外，主副標與內文之間，各自之間應該要有不同的間距，建立層次感。

下圖是沒有層次感的範例，間距都一樣 下圖則是建立起標題之間的層次差距 6.字距 原則上基本字距都應該訂為0，網站內的文字主要作為閱讀使用，無論中文還是英文，多餘的字距將會造成閱讀困難。

6.1.標題字距 某些設計裝飾用的標題字體可考慮單獨加上字距，由設計師自行考量 以下是拉長字距的標題案例 7.內文排版 內文排版章節主要規範一般部落格文章或網站靜態文章中，含有大量文字、標題與段落的樣式，可以與網站的其他區塊排版風格分開。

內文排版主要以閱讀舒適度為最高優先， 7.1.字體大小 可考慮 16px ~ 18px 以上，較大的字體大小有助於長時間閱讀大量文字。

標題部分，由於Bootstrap皆把標題大小寫死，建議另行用 em 做調整。

並將h2~h6調大，不然h6會小於一般字體大小。

別忘了標題最好加字重，否則中文的標題到h4以下就跟內文分不出來了。

7.2.間距 建議 元素的上下 margin 皆設 1em，明確區隔段落。

標題可上寬下窄，上方 1em，下方 0.6em ~ 0.8em，可建立出層次感。

設計感較重的網站，上下方可以從 1.3em 以上起跳。

7.3.行距 行距同樣維持150%~175%擁有優良的閱讀感受。

7.4.顏色 若網站採用較淡的灰黑色當作主要字體顏色，內文切記要加深，建議至少要比 #666 來得更深，閱讀較不吃力。

7.5.樣式 在LESS編寫時，建議將內文專用樣式用一個class包起來，與網站的其他區域做區隔。

我們較常用的是 articlt-content 這個class。

以下的範例可以直接複製到專案中使用: 8.範例程式 本文的排版範例可以在這裡看到DEMO: https://jsfiddle.net/asika32764/L3dx987L/ 以下的LESS/SCSS程式碼可以直接Copy到專案中使用(將不定期更新) 9.其他 9.1.參見 設計中怎麼處理好中文排版 幾個中文排版訣竅，有效改善閱讀體驗 漢字標準格式CSS框架 簡單做好中文排版：十項讓長文章更容易閱讀的原則 9.2.目前在使用這個排版風格的網站 LYRASOFT 飛鳥學院 夏木樂網站知識 AddMaker AnimApp動畫社群 台灣美語通 DatavideoVirtualset iHealth 澎坊 via https://github.com/lyrasoft/coding-standards/blob/master/chinese.md  上一篇 網站主機是什麼？虛擬主機、VPS主機、實體主機差在哪？ 回列表 下一篇 網頁設計和網站開發有什麼區別？ 精選文章 文章分類 所有文章(37) 網站規劃(9) 網路趨勢(1) 經驗分享(12) 網站知識(13) 案例分享(2) 最新文章 網站視覺風格怎麼選？風格分類、範例一次看 Li-git|2022-05-18 #經驗分享 我的網頁有BUG，該如何與網頁設計公司溝通？ Li-git|2022-05-09 #經驗分享 【網站架構須知】網站架構是什麼？架構完整、架構不健康是什麼概念？ Li-git|2022-04-22 #網站知識 突破極限 一起開拓全新視野 尋求網頁設計建議