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。所以就來問問看有沒有人有建議...?

換 Ubuntu 的字型... (Andada、PT Sans Captian、Hack)

在 HiDPI 4K 螢幕下挑字型的基準跟以往普通 DPI 螢幕完全不同。以往會受到當畫素不夠時的限制,在 HiDPI 下就不需要考慮這點了...

我三不五十就會換個字型用 (換心情),所以之後有可能會再換掉... 這次挑選的基準有三個:

  • 免費可在網路上下載個人使用的。
  • 字的重量要重一些。
  • sans 與 monospace 的字要帶有一點 serif 的感覺。

我把 fontconfig 設定放在 99-local.conf 這邊,有興趣的可以直接拉回去丟到 /etc/fonts/conf.d/ 裡用...

Andada 是拿來定義 sans 的,長這樣:(出自「Andada Font Free by Huerta Tipográfica」)

PT Sans Captain 是拿來定義 serif 的,長這樣:(出自「PT Sans Font Free by Paratype」)

Hack 是拿來定義 monospace 的,長這樣:(出自「Hack Font Free by Chris Simpkins」)