Hacker News Daily 上看到的網站,直接使用對應的字型,讓使用者可以直接感覺:「Dev Fonts」。
目前上面有 33 種字型,大多都是免費的 (目前上面只有看到 Dank Mono 是收費的字型)。
在頁面上可以換 theme,以及選擇不同程式語言的 syntax highlighter,另外下方範例的程式碼也可以自己修改,這些都是讓使用者模擬實際的感受。
幹壞事是進步最大的原動力
Hacker News Daily 上看到的網站,直接使用對應的字型,讓使用者可以直接感覺:「Dev Fonts」。
目前上面有 33 種字型,大多都是免費的 (目前上面只有看到 Dank Mono 是收費的字型)。
在頁面上可以換 theme,以及選擇不同程式語言的 syntax highlighter,另外下方範例的程式碼也可以自己修改,這些都是讓使用者模擬實際的感受。
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 可以這樣玩:
這邊講的是透過 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">
最後一招就是把字型放在自己家,差異就更大了:
另外一個好處是改善 privacy,不過好像沒特別提到...
前天看到的「Only 90s Web Developers Remember This」文章裡面在懷舊 (?):
然後在 Facebook 上看到 zonble 貼的:「DHTMLConf」,太讚了 XDDD
讓人懷念的東西... XDDD
其實就是在 Ubuntu 下塞兩個檔案進系統而已,一個是字型檔 PowerlineSymbols.otf,另外一個是設定檔 10-powerline-symbols.conf。
主要還是練習打包 .deb 並且使用 Launchpad 放自己包的 package,十多年前也差不多是這樣開始玩 FreeBSD 的 send-pr 累積經驗...
Update:一次只能選一個字體,找不到全選的地方,然後有一千多個... 還是去網路上找人家包好整包抓比較快。
在 Google Developers Blog 上看到官方對於下載 Google Fonts 的建議方案:「Download Google fonts to your desktop」。
Monotype 所推出的工具「SkyFonts」,支援 Windows 與 Mac 版。當 Google Fonts 有新的字型時,SkyFonts 會自動更新。不過當 Google Fonts 刪除時會發生什麼事情就不知道了...
會需要 Microsoft .NET Framework 4.0 與 WindowsInstaller 4.5 (x86):
這樣感覺有點肥... XD