fonts

挑選開發者用的 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">

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