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」)

Ubuntu 內建的 Noto Sans CJK...

今天在 Facebook 上才看到 chihchun 貼的資料,在 Ubuntu 14.04 之後都有 Noto Sans CJK 可以用:

sudo apt-get install fonts-noto-cjk #

Posted by 蔡志展 on Sunday, July 26, 2015

這邊提到的是 fonts-noto-cjk,不過我實際測試發現裝 fonts-noto 會比較好:前者預設值很細 (Light),後者包括了各種粗細 (我自己是用 DemiLight)。

這樣又少了一個要自己管理的東西了...

Adobe 與 Google 共同推出 CJK 字型

AdobeGoogle 合作推出了 CJK 字型:「隆重介紹 思源黑體:開放原始碼 Pan-CJK 字型」、「Noto: A CJK Font That is Complete, Beautiful and Right for Your Language and Region」。

這些字體在 Adobe 與 Google 會叫做不同的名稱:

Google will release it as Noto Sans CJK as part of Google's Noto font family. Adobe will release it as Source Han Sans as a part of Adobe's Source family.

字體是由 Adobe 的西塚涼子所開發,而 Adobe 也擁有字型的著作權,並以 Apache License 2.0 放出來。

而 Google 也有說明這些字型參與的過程:

Google contributed significant input into project direction, helped to define requirements, provided in-country testing resources and expertise, and provided funding that made this project possible.

而 Adobe 的部份:

Adobe brought strong design and technical prowess to the table, along with proven in-country type design experience, massive coordination, and automation.

另外還有幾家公司一起參與:

In addition, three leading East Asian type foundries were also brought in to design and draw a bulk of the glyphs—Changzhou SinoType Technology, Iwata Corporation, and Sandoll Communication—due to the sheer size of the project and their local expertise.

字體可以在 Google Noto Fonts 裡直接下載取得。

切過去用以後還是有點不太習慣,不過目前第一印象還算不錯...

修改中文維基百科的字體...

Mac 上面的中文版維基百科字體「很不友善」,沒有花太多時間看,但大概是用 font-face 改 sans-serif 造成的...

因為平常都有登入,懶得跟他囉唆,設個 css 進 User:Gslin/common.css,直接避開 sans-serif 被 font-face 惡搞掉的情況:

body {
    font-family: Helvetica;
}

這樣出來的字就好多了...