《網頁設計》舒適的中文文章CSS排版設定（附加思源黑體注意 ...

前面提到說將初始設定回歸到了10px，這邊1.7rem的意思就是將10px*1.7， 也就是17px，所以我們的文字大小（font-size）基本設定就是17px。

（本來我是設定為 ... > 《網頁設計》舒適的中文文章CSS排版設定（附加思源黑體注意事項）-iamtie（我是鐵） 首頁 服務項目 設計案例 主要心得地圖 鐵定有好貨 2020年9月19日星期六 《網頁設計》舒適的中文文章CSS排版設定（附加思源黑體注意事項） 鐵(Tie) supervictory35 網頁設計 9月19,2020 文章除了標題要吸睛、內容要精彩之外，閱讀的舒適度也是非常重要的，唯有讓讀者眼睛感到舒服了，他們也才更願意看下去。

如果說標題是為了吸引人看你，那第一個段落就是讓人更想了解你，而內文的舒適度則決定讀者願不願意繼續和你相處。

（本篇需要懂一點HTML、CSS語法） 何謂閱讀舒適度 我個人對於舒適的看法，是文章內有適度的留白，給予讀者空間喘息，降低閱讀上的壓力，更加願意滑完整篇文章，就算是達成舒適這項標準了。

至於要如何達成適度的留白，也是我這篇文章要分享的CSS排版設定，基本上只要從主標題、副標題、小標題、字型、字重、字距、行高（行距）、段落間距來著手，就可以讓閱讀舒適度不會太差。

（至少要能夠一眼區分出標題、段落與文章重點） 當然文章也可以使用素材來做喘息的安排，像是插入圖片、影片、表格...等等，都可以讓閱讀上的節奏感更趣味、不疲乏一些，但就不是本篇文章要談的部分了，未來有機會再來分享我的看法。

本篇文章著重在基本設定，也就是所謂的基本功吧，把基底打好，舒適度就不會太差了。

雖然你目前看的這篇文章已經是我的CSS設定呈現，但接下來我會把細節公開。

（對於網站的SEO也有幫助） 名詞解釋 主標題H1 文章的主題名稱，通常只有一個。

就像是書名一樣，用來吸引讀者好奇翻一翻，進來看一看文章在說什麼。

副標題H2 類似一本書的目錄章節吧，會有好多個。

每個章節都是圍繞著主題來撰寫內文，讓你更明白主題所要闡述的事。

小標題H3H4H5H6 每個副標題裡面，又有一些小標題段落來闡述副標題，讓你更了解副標題所要說明的事。

（通常我只用到H4而已，H5H6幾乎沒用到） 字型 文章字型給人的感受就很因人而異了，有人喜歡有襯線字型（新細明體、宋體），有人喜歡無襯線字型（微軟正黑體、思源黑體）。

但最重要的是要在網頁上能夠呈現，就得注意讀者的電腦有沒有這個字型（Apple蘋果使用者可能就沒有微軟正黑體），因此用內建字型很可能造成Mac或Windows系統的讀者看到的字型不同，影響閱讀體驗。

我選用Google的網路字型「思源黑體」，只要使用者能夠上網，就能夠在瀏覽我的網站時自動下載思源黑體使用。

這樣就能降低不同系統間閱讀體驗不一樣的情形。

字重 簡單說就是字體的粗度，通常標題或重點標示會比較粗。

字距 字跟字之間的距離，通常不會特別去設定。

行高（行距） 行跟行之前距離，也就是每行的高度要多少。

這個英文和中文就有差別了，英文通常比較窄，中文需要寬一些。

段落間距 段落跟段落之間，要比行跟行之間還要寬，這樣才好區分不同段落，都非常靠近的話就顯得擠成一坨，難以閱讀。

我的文章CSS排版設定 SeethePen中文CSS排版設定byVaselene (@vaselene34)onCodePen. 原始碼：Codepen CSS設定細節說明 首先要先引入字型 字重（font-weight）不宜過多，太多會讓網頁讀取的速度變慢，所以我這邊只載入300、500、700三個。

300：用於一般內文 500：可以用來畫重點，或是小提醒使用 700：主標題、副標題、小標題 其他字重可參考：NotoSansTC-GoogleFonts html字體大小初始化設定 html{ font-size:62.5%; } font-size:62.5%; 這邊的用意是讓初始設定回歸到10px（原本是16px，乘以62.5%後就為10px），後面以相對單位rem來設定字體大小的時候，較好計算和判斷。

因為我的字體大小都是用相對單位rem，比起使用絕對定位的px更好修改整體大小，當要變動時只要改變html的大小設定，就能夠整體一起改變而不影響標題和內文之間字體大小的差距，不用再一個一個調整了。

body全局字體基本設定 body{ font-family:'NotoSansTC',sans-serif,Arial,MicrosoftJhengHei!important; font-size:1.7rem; line-height:1.75; color:#1a1a1a; font-weight:300; } font-family:'NotoSansTC'; 字型的設定（font-family），最主要就是這個「NotoSansTC」要排在最前面，後面的字體都是「NotoSansTC」字型不能使用時，要指定的替代字型。

font-size:1.7rem; 前面提到說將初始設定回歸到了10px，這邊1.7rem的意思就是將10px*1.7， 也就是17px，所以我們的文字大小（font-size）基本設定就是17px。

（本來我是設定為16px，但礙於思源黑體在mac呈現上有點太細，會導致看得很辛苦，所以我改為17px。

） line-height:1.75; 行高（line-height）為1.75，這邊的意思是說每行的高度為「字體的大小*1.75」，如果我的內文字體大小設定是1.7rem（17px），那我的每行高度就是29.75px（17px*1.75）。

font-weight:300; 字體的粗細，我通常預設是設定300。

標題、畫重點需要加粗在個別調整就好。

h1、h2、h3、h4、h5、h6標題共同設定 h1, h2, h3, h4, h5, h6{ font-weight:700; line-height:1.5; margin:0; margin-bottom:0.5rem; } font-weight:700; 不管是主標題、副標題還是小標題，字重都用700較好與內文對比。

line-height:1.5; 行高我是設定1.5，因為通常標題緊接著會是內容，我會讓他們（標題和內文）接近一些，看起來就比較清楚是屬於同一個段落。

margin:0; margin的部分因為我有套用bootstrap的框架，他基本就有一些設定，所以我先把它歸0會比較好處理。

也可以適當的加一些margin-bottom來做微調！ h1、h2、h3、h4、h5、h6標題個別字體大小 h1{ font-size:3.2rem; } h2{ font-size:2.8rem; } h3{ font-size:2.4rem; } h4{ font-size:2.2rem; } h5{ font-size:2.0rem; } h6{ font-size:1.8rem; } 不管是哪一個標題設定，都要比內文大，這樣才好區分與內文的差異。

雖然h5、h6很少會用到，但還是設定一下。

b粗體 b{ font-weight:500; } 一般b的字重（font-weight）設定是bold，bold預設字重是700，在這裡我調整成500，讓他跟標題有個差別，但是又能夠看得出來與內文不同，可以用來凸顯重點。

p段落 p{ margin-bottom:2.5rem; } margin-bottom:2.5rem; 段落與段落之前一定要有足夠的間隔，除了較好區分不同段落之外，這樣閱讀上也有喘息的空間。

（礙於編輯器關係，我自己習慣用br） ol、ul項目清單 ol, ul{ padding-left:1.7rem; } 這個就因人而異了，我自己是習慣把項目符號跟主要文字貼齊，不太喜歡預設的設定（會讓左邊多出一大塊空白）。

參考資料 中文CSS排版原則指南 深入CSS之line-height應用 font-size-金魚都能懂的CSS必學屬性 CSSProperty:font-weight 我是鐵，希望這篇文章能夠幫助到對文章排版有困難的朋友！ 標籤： 網頁設計 相關文章 網頁設計 沒有留言: 張貼留言 較新的文章 較舊的文章 首頁 訂閱： 張貼留言(Atom) 關於我 我是鐵 非典型前端工程師，駭進自己的身體與心靈 消化許多好書，減掉資訊脂肪 增加知識肌肉，強健心靈肌群 聯繫信箱（如有業務需求可來信） iamtie34[at]gmail.com [at]請替換為@ 服務項目介紹 也可請我吃一份晚餐，讓我吃飽了再上 書籍心得 超級大腦飲食計畫 (13) 肥胖大解密 (12) 脂肪與油救命聖經 (4) 其他類別 我的商家 (4) 武漢肺炎 (10) 直播筆記 (1) 個人品牌 (12) 健身 (5) 動物森友會 (3) 設計 (2) 網頁設計 (6) 寫出影響力 (16) 影片筆記 (11) 影音平台經營 (12) 雞胸肉 (1) Chrome (3) Clubhouse (1) CMX (2) Facebook (5) Google (3) Homebrew (1) Instagram (9) LINE (6) TeSA (10) TeSA廣告投手班 (3) YouTube (6) 近期文章 鐵的電子報 總瀏覽數 廣告 Copyright© iamtie（我是鐵） 目錄