There are a total of 178 posts here. | 這裡總共有 178 篇貼文。

ttheng's microblog. | 侃侃而隨想極短文。

又將主 blog 網站中文字型換回一點明體

關於我的主 blog 網站,其實有一個不算祕密的小祕密:之前(確切而言是 2025 年 7 月前)有一段時間,爲了表示對傳承字形的支持,我曾經將上面的中文字型改爲一點明體1

不過當時的我對使用 Hugo,以及編寫 HTML 和 CSS 都不是很拿手,對「網頁字型」(Webfont)的概念也幾乎一無所知,所以在嘗試將網站字型自訂成一點明體的時候,遇到了許多技術障礙,像是不知道該將字型檔案放在哪一個文件夾、嘗試在 CSS 設定 @font-face 時一直出錯、明明在離線開發環境(development environment)成功修改了字型但在正式上線環境(production environment)卻不行,諸如此類。

到最後成功在網站的正式上線版本修改了字型,卻遇上了中文字型的老問題——檔案太肥大(我當時用的甚至還是沒有經過「瘦身」的原版 ttf 格式字型檔案,大小高達 24 MB!),導致網站只能以龜速載入。我也因此被迫陷入另一個「字型瘦身」的漩渦裡頭:設法將字型檔案轉換爲網路友善的 woff2 格式,以及將 web.dev 上的教學文件寫的步驟都跟足了一遍等等。我甚至連「字型子集化」(font subsetting)這一招都用上了。即便如此,雖然檔案大小成功被我縮小到只剩原版的三分一,但網頁載入速度仍然稍嫌緩慢。

也因此,後來我「一氣之下」,直接放棄使用一點明體,改用有提供 CDN 支援,並且同樣也是授權開放的昭源宋體了。雖然我是不討厭使用昭源字體,但它畢竟不是傳承字型,所以它對我而言只是一個「妥協方案」,而不是百分百完美的選項。

不過今天我偶然找到這篇文章,該文章所在的網站恰恰就是使用了一點明體,而且載入速度也滿快的!我也是透過該文章才得知原來官方有提供 CDN 網頁字型的版本。「之前我怎麼都沒發現?😅 不過太好了,我不用再重造輪子了!」我心想。我也毫不猶豫地又將主 blog 網站中文字型改回一點明體了!

對了,上面提到的文章有寫到官方提供的一點明體 CDN 版本「目前設定的 font-display 策略是 block 而非 swap」(此文最初發佈之時亦然),而我(也)比較偏好 swap 模式,所以我用了個比較「土法煉鋼」的方式:直接將官方提供的原始程式碼 fork 過去,並將裡頭的 CSS 出現的 font-display: block 全部改成 font-display: swap,在 push 上去後再將 jsDelivr 網址改成我 fork 過去的版本歡迎取用!)。

至於這裡(極短文站)呢,我還是選擇爲了將「網頁輕量化」做到極致,不使用任何自訂字型,而是讓使用者的裝置本身作主,使用系統預設的字型。


  1. 會特別選用一點明體,除了是因爲它授權開放以及其襯線體serif)設計符合我需求之外,另一個比較私心的原因是因爲它是由香港作詞人內木一郎主要編撰的。我很喜歡內木一郎筆下的 Vocaloid 歌曲粵語翻唱版的歌詞作品。 ↩︎

<< Previous Post

|

Next Post >>