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">

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

另外一個好處是改善 privacy,不過好像沒特別提到...

JetBrains 釋出 Monospace 字型

JetBrains 釋出了一套 Monospace 字型 Jetbrains Mono 提供給大家使用:「JetBrains Mono: A free and open source typeface for developers」。

使用 Apache 2.0 License 授權,其他比較常見到的是 SIL Open Font License

JetBrains Mono typeface is available under the Apache 2.0 license and can be used free of charge, for both commercial and non-commercial purposes. You do not need to give credit to JetBrains, although we will appreciate it very much if you do.

雖然是個不常在字型上見到的授權,但 Apache 2.0 License 在軟體這塊蠻常見的,大家的熟悉度也還 ok,應該是沒有什麼大問題... 要注意 Apache 2.0 License 與 GPLv2 是不相容的就好,不能包在一起丟出來。

先換起來用看看,之後再看看有什麼想法...

美國政府發行的字型 Public Sans

Public Sans 是一套美國政府出資而產生的無襯線字型,專案放在 GitHub 上 (uswds/public-sans)。這套自行不是全部都自己刻,而是改自於 Libre Franklin Font (以 SIL Open Font License v1.1 授權,而 Public Sans 沿用同樣授權)。

第一個目標是授權:

Be available as a free, open source webfont on any platform.

另外是使用的廣度:

Have a broad range of weights and a good italic.
Perform well in headlines, text, and UI.

Have good multilingual support.
Allow for good data design with tabular figures.

在 GitHub 頁面上有整理與 Libre Franklin 的差異,可以看到配合現在的呈現媒體而做了不少調整。

B612 字型

B 612 是小王子裡的星球,被拿來引用當作字型名稱了:「B612 – The font family」。

這是空中巴士設計給飛機上的系統用的,所以包括了「舒服」(長時間) 與「易讀」,算是某種以「安全」為考量的字體?

In 2010, Airbus initiated a research collaboration with ENAC and Université de Toulouse III on a prospective study to define and validate an “Aeronautical Font”: the challenge was to improve the display of information on the cockpit screens, in particular in terms of legibility and comfort of reading, and to optimize the overall homogeneity of the cockpit.

然後包括了 regular 與 monospace 兩種:

Git 的記錄已經 open source 一陣子了,拿來當 sans-serif 用一段時間看看好了...

fontconfig fallback 機制與 CSS font-family fallback 機制的衝突...

自己搞不定,加上需要有圖才比較好理解,所以發篇文章問看看...

起因是在 Twitter 上發現某篇文章的截圖,在我的機器上顯示是 sans-serif 類的字型,而對方顯示的是 serif (看起來像是 Mac 的機器上):

而翻了網站本身的 CSS 設定,發現是設成 serif,所以表示我這邊的設定有問題...

找了些資料並且測試,發現是 Linuxfontconfig 所設計的 fallback 機制跟一般人認知的不一樣,使得 CSS font-family fallback 機制直接失效...

在那篇文章的 font-family 設定是「medium-content-serif-font,Georgia,Cambria,"Times New Roman",Times,serif」,所以你會假設 medium-content-serif-font (這是 Medium 設定的 web fonts) 內沒有的字型會去 Georgia 找,然後依序是 CambriaTimes New RomanTimes,最後到 serif

但在 Linux 下的 fontconfig 的設計則跟這點衝突。當你丟 medium-content-serif-font 查詢時,系統會將全系統有的字型都給你 (但是排序好),而不是只有找 medium-content-serif-font 這個字型:

gslin@GSLIN-HOME [~] [22:11/W2] fc-match -s 'medium-content-serif-font' | wc -l
122
gslin@GSLIN-HOME [~] [22:11/W2] fc-match -s 'medium-content-serif-font' | head 
FreeMono.ttf: "FreeMono" "Regular"
FreeSans.ttf: "FreeSans" "Regular"
FreeSerif.ttf: "FreeSerif" "Regular"
opens___.ttf: "OpenSymbol" "Regular"
LinLibertine_R_G.ttf: "Linux Libertine G" "Regular"
Norasi.ttf: "Norasi" "Regular"
KacstOne.ttf: "KacstOne" "Regular"
FiraSans-Regular.otf: "Fira Sans" "Regular"
NanumGothic.ttf: "NanumGothic" "Regular"
fonts-japanese-gothic.ttf: "TakaoPGothic" "Regular"

而因為將所有系統內有的字型都放進去了,所以 font-family 第二個設定基本上都沒用了,因為我裝了一堆語系的文字... Orz

而我想要關閉這套機制,卻發現看起來關不掉:「How to block glyph fallback on Linux?」。

後來想要找 workaround 來解這個問題,不過看起來沒有堪用的 workaround。所以就來問問看有沒有人有建議...?

繼續吵 Unicode 裡啤酒的圖示...

在「大家在吵漢堡的 Unicode 呈現...」這邊在吵漢堡,然後有人就開始找事了 XDDD

然後有點煩 XDDD

最近應該會有一波熱潮 XDDD

Adobe 的 Typekit 在嘗試純 CSS 版本的網頁字型了

先前 Typekit 需要使用 JavaScript,現在則是開始嘗試純 CSS 版本了:「Now in Early Access: Serve web fonts without JavaScript」。

然後另外發現 use.typekit.net 以前是 EdgeCast,現在變成 Akamai 了...