almost 2 years ago

在思源黑體發佈之初,因為最早看到的新聞上是寫Google那邊的的連結,所以直接下載了Google發佈的 Noto Sans,沒注意到這個字型系列其實有等寬字型。之後瀏覽到思源黑體的GitHub repo,才意外發現這個「思源黑體 HW」,之後到Noto Sans那查到對應的Noto Sans Mono。

(插曲:那時候繁體中文字型的名字是 Noto Sans T Chinese,後來Google對中日韓字型做了些額外調整,成為了 Noto Sans CJK TC)

這麼一來,終於找到一個可以取代「細明體」和「文泉驛等寬」的中文等寬字體了!還是真正的繁體中文版!

不過到底哪裡會用上等寬的中文字型呢?第一個想到的就是PTT了。(不是鄉民,只是大學生好像都需要會一點)於是就把它套用上去。因為筆者常用Firefox,平常上BBS都用BBSFox,就將其套用在這個附加元件上:

能夠出現這行藍字可是很稀有的呢!...結果很不幸地就跑版了。

釐清原因:由於和西文字型的差異,中文的預設字高通常會稍微高一點,版面是用 <span>控制, span是inline元素,無法單獨控制其字高,於是將原本算好的文字行高(line height)硬是撐開了一點點,於是每行都滿出來了。

好不容易找到一個高品質的字型,怎能白白浪費?加上身為一個CSS愛好者(?),當然是想藉著加入外部CSS的力量來改造,於是就寫了一小段CSS,藉由Stylish的幫助,立刻就完美解決了這個問題:

文章列表也變得清爽一些,從這樣:


變成這樣:

原理非常簡單,就是對每行的 <span>display: block 使其變成block元素以對其行高進行限制,並且用 overflow 屬性隱藏超過的部份。只是這麼做會影響到游標的位置。已經使用絕對定位的游標要如何再加以移動?我們可以用CSS的 transform 來完成。至於詳細的HTML結構這裡就省略了。

詳細的程式碼見此:
https://gist.github.com/andy0130tw/01a14c26b59d8b698f54

← 重操舊業:CodernityDB for Python 3 把 terminal 的顏色換成 material 主題 →
 
comments powered by Disqus