fonts

另外一個 monospace 的字型 Hera

以 Source Code Pro 為主，混入了 Fira Mono、Inconsolata 與 IBM Plex Mono：

Hera is a monospace font which is a customised version of Source Code Pro which was originally created by Paul Hunt.

Hera consists mainly of glyphs from Adobe Source Code Pro mixed with glyphs from popular monospace fonts like Fira Mono, Inconsolata, IBM Plex Mono, etc.

Hera emphasises readability and uniformity for sigils and symbols which makes it suitable for use in coding environments.

GitHub 上有 screenshot 可以參考：

以及：

用了幾天還可以，應該會繼續用，放入常態性的替換清單... (我同一個字型看久了會想換)

新世紀福音戰士的字型

沒想到在 Hacker News 首頁上看到第一名居然是這個連結：

2019 年的文章：「Neon Genesis Evangelion」，找資料的時候發現有簡體中文版的翻譯：「末世感叩击：《新世纪福音战士》的文字世界」。

這些字型是由日本的 Fontworks 所開發出來的 Matisse EB，在片尾的 credit 也可以看到「株式会社フォントワークスジャパン」：

主要是沒想到會在 Hacker News 首頁上的第一名看到這個...

挑選開發者用的 Monospace 字型

Hacker News Daily 上看到的網站，直接使用對應的字型，讓使用者可以直接感覺：「Dev Fonts」。

目前上面有 33 種字型，大多都是免費的 (目前上面只有看到 Dank Mono 是收費的字型)。

在頁面上可以換 theme，以及選擇不同程式語言的 syntax highlighter，另外下方範例的程式碼也可以自己修改，這些都是讓使用者模擬實際的感受。

LaTeX 風格的 CSS

Twitter 上看到 jserv 的轉推提到的專案：「LATEX.css」。

LaTeX.css ?https://t.co/n2ETCmle2k pic.twitter.com/guHkIgW1oS

— Guillermo Rauch (@rauchg) May 23, 2020

主要的感覺應該還是來自於字型，其他的看起來還好...

自動屏蔽關鍵字的字型...

看到「Scunthorpe Sans」這個字型，利用字型系統提供的 Ligature 自動屏蔽掉 F**K 之類的字，實用性不高，算是展示 Ligature 可以這樣玩：

Google Fonts 的加速方式

這邊講的是透過 css (以及 js) 使用的 Google Fonts，作者想要改善這塊，加速網頁的速度：「Should you self-host Google Fonts?」。

作者第一個提到的技巧是個懶人技巧，只要加上 preconnect 預先把 HTTPS 連線建好，就可以提昇不少速度。因為這可以降低先取得 css 後才建立連線的速度差異：

<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">

作者有提到 Google 在 css 檔案的
header 裡面本來就有加上 preconnect，但從前後比較可以看出，整個網頁的結束時間差了一秒 (這是作者在 Google Chrome 的 3G Slow 設定下模擬的)：

另外一個技巧是增加 swap，讓 Google Fonts 還沒有讀進來之前先用系統有的字型呈現。這樣不會出現整頁只有圖，然後突然字都冒出來的情況，也就是把一般在用的：

<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

加上 &display=swap：

<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">

最後一招就是把字型放在自己家，差異就更大了：