技術筆記｜內文版型的字體更換、掙扎與突破

我一直很在乎體驗跟感覺這件事情，所以常常會有一顆不知足的心，透過網站的更新日誌，可以發現我常常在版型上面做些變更。

這一週讓自己放空，沒有積極的寫作、產出，內心卻反而產生許多不同的波動。昨天天外飛來一筆，看著自己的網站版型，默默地想要改變些什麼。

人有時候就是這樣，當沒有做事情一陣子的時候，就會想說，好像應該要來做點什麼，即使每天工作上的事情不斷地轉，還是有種不滿足的心態，喜歡什麼研究加上自己動手的我，這次的目標是改變字型。

為什麼要改變字型？

我還蠻常逛一些部落格的，有一個部落格的排版設計讓我非常印象深刻，在這邊也推薦大家就是《JUSTFONT BLOG》身為一家推廣字型、造字的企業，您可以說，排版好是理所當然的。然而，其中令人感覺舒服的不僅僅只是排版，而是其中設計出來的閱讀體驗。

在閱讀裡面的文章的時候，透過排版帶出來的，是一種輕鬆且令人感覺舒服的狀態。配合上內部裡面行文的風格，閱讀時，令人有一種學習的愉悅。

的確，體驗是主觀的，但好的是，這樣的想法激發了我。回想一下自己的想做的事情，決定回來檢視排版，因為我想創造類似這樣的體驗。

來看看排版這件事情

中文的排版在網路的世界是相對困難的，既要是橫書的體系，又受到西方字型影響甚多，重現「閱讀的質感」是一件很挑戰事。

趁著這次，找到了一些不錯的文章，其中，最推薦大家閱讀《簡單做好中文排版》，文中許多觀點都非常實際且實用，不論是用在數位跟書面排版之中。尤其在第三、五、六，呼應著我製作網站跟寫落格十幾年來的真實感受。

同時，大腦不自覺回想到自己喜歡的幾個網站，回想著他們的版型設計跟閱讀體驗，例如報導者、端傳媒，然後還有最近不知道為什麼逛到的熱情先決，想著想著，內心一把熊熊烈火的希望讓我的網站也有一樣的流暢感。

認真分析，會發現這種想要，是一種「感覺」，不是只有死版版的「格式」。

如果要定義的話，是一種看起來的舒服，以及讓人覺得這一篇文章是有價值的感覺。每個人主觀的認定可能有差異，但至少我想要設計出一個讓自己舒服，檢驗標準就是「會一看再看」的版面。

另外，有一篇也很值得參考《中文書寫規範與排版指南》，其中把寫作要注意的事項跟排版的概念都融合在一起，看完不僅在排版的概念精進，也會在寫作的時候，更注意到原來需要這樣才能符合排版。

完成字體修正的步驟

修改的部分

先講我最後調整出來的狀態，網站內文改為「明體」，採用 cwTex 明體（僅支援繁體中文字型），其餘字體由しっぽり明朝 B1（Shippori Mincho B1）顯示，英文則為 Source Serif Pro。

由於 cwTex 明體設計的時候，¹理念為將標點符號放在底線之上，所以特別找了一個比較早期的版本，支援置中的標點符號，透過 CSS 去控制將標點符號濾出，設定成不同字體。

字體較以前放大了一點，從原本的 1.2rem 改為 1.25rem，行距則由 1.7em 拉窄為 1.6em。

設定 cwTex 明體為 Webfont

我使用的 Justfont、Google Fonts 並沒有支援 cwTex 明體這一款文字，所以需要把下載的自行轉換成 Webfont 以方便讀取。如果您也有喜歡的字體想要轉換，可以使用 cloudconvert 轉換，我是從 .ttf 轉換到 WOFF 以及 WOFF2。

本來我是直接跟 Hugo 一起上傳到 Netlify，但發現其實很佔用流量。最後發現了一個好用的小工具 JSDELIVR，能夠把 Github 的文件轉換成 CDN，提高存取速度，所以我就把 Webfont 的檔案 WOFF 及 WOFF2 上傳到 Github，再透過 JSDELIVR 設定成存取的 URL。

@font-face {
  font-family: 'cwtexqming';
  font-style: normal;
  font-weight: normal;
  font-display: auto;
  src: url("https://cdn.jsdelivr.net/.../cwTeXQMing-Medium.woff2") format("woff2"),
	url("https://cdn.jsdelivr.net/.../cwTeXQMing-Medium.woff") format("woff");
}

標點符號字體設定

CSS 支援單獨把特定的 Unicode 拉出來設定字體，透過 unicode-range 這個函數。

由於，有許多 Unicode 區段都有標點符號，您可以看到我涵蓋了許多不同的區段，如果希望連全形字母都設定進去的話，區段就是 FF00—FF5E。〔詳細範圍可以參考：半角及全角形式〕

而同時可以直設定在同一個 Webfont 之中，所以多寫一段 CSS 如下：

@font-face {
  font-family: 'cwtexqming';
  unicode-range: U+FF00-FF0F, U+FF1A-FF20, U+FF3B-FF40, U+FF5B-FF5E, U+3000-303F;
  font-style: normal;
  font-weight: normal;
  font-display: auto;
  src: url("https://cdn.jsdelivr.net/.../cwTeXMing.woff2") format("woff2"),
	url("https://cdn.jsdelivr.net/.../cwTeXMing.woff") format("woff");
}

針對中文的標點符號，這邊有把每一個詳細的整理，不過大規則可以參考以上說的。同時還有一篇更詳細的整理，但基本上除非你很想自訂很多字元，我自己是沒有用上。

最後再去整個網站的樣式設定表設定字型，就完成囉！

過程中的掙扎

明體還是黑體

這一個論戰長期在我心中發生，因為從 2006 年經營部落格至今，每一次的版型更換，我都會去思考這個問題。

我非常喜歡宋、明體在書本上的印刷的質感，閱讀起來的舒適程度。但過往電腦受限於技術，以及螢幕的解析度，明體、宋體顯示起來會看起來非常不好看，會有毛邊的感覺，放大後又覺得粗細看起來很不勻稱。

隨著蘋果把黑體當作系統字體，微軟開始使用黑體為標準中文字體後，黑體佔據了市場的一片天。

但我一直知道，黑體提供的感覺非常的「重」，閱讀久了其實會有一種壓迫感。心裡的感覺是不會錯誤的，所以想要把黑體改為其他字體的聲音不斷出現。

每次最後都想說要順從主流，但隨著看到雷蒙三十部落格，使用的內文字體為凝書體，還有許多我自己有印象的地方，都漸漸地脫離「無襯線字體（sans-serif）」的束縛，反覆跟自己內心確認後，決定改為明體。

因為我想要創造一種閱讀書籍的氛圍。

其實我目前使用的兩個 Webfont 服務是又提供宋體、明體的，但最後看了看，不是看起來字太滿，就是細節上面沒有讓我覺得舒服，只好自己找方法引入 cwTex 的字體。

標點符號到底該放在哪邊？

有幸在大學時期上過吳聰敏老師的課，老師對於排版的掌握令我甚感佩服。其中有一點，令我內心起了很大的波瀾，就是標點符號的位置。

老師曾經在很多地方，都推廣在寫作以及排版的時候，標點符號不應該置中，應該為貼近底線的設計，現代的文書多為日文、簡體字才會使用此類標點符號。老師認為：「這樣會提升讀者的感受」，非常衝擊！

其後，陸續看到許多使用 cwTex 排版的書籍，都依循這樣麼方式，其實在閱讀上來講，是有舒適感的。

但最後我決定先不使用在網站的排版之中，理由是「保持一制性」。

除了內文的部分，網站主體以還是維持使用黑體的格式，他們預設的標點符號是置中的，如果單只有內文使用置底標點，我的體驗會有一種中斷感，使網站好像是兩個不同的主體拼湊在一起。

所以保持在置中才能維持瀏覽的舒適感，也才是我透過版型營造的。

好了！今天的故事就先講到這邊。

我覺得進步是透過每一次改變不斷堆疊，因為我們會有新的想法，就會不斷地前進、改變。網站版型也是這樣道理，之前我在使用 Hugo 免費搭建個人網站提過一個概念：「找一個適合的慢慢改成自己喜歡的吧！」現在回頭看看，一次次修改，就是在往「成為自己喜歡的」這條路邁進。