Home » Posts tagged "font"

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

Golang 本身也出字型了...

不愧是 Google 在後面撐腰,Golang 找人設計了一整套字型,叫做「Go fonts」:

The Go fonts are divided into two sets, Go proportional, which is sans-serif, and Go Mono, which is slab-serif.

不過看了一下 monospace 的部份,有點微妙:

其他兩個也許哪天換心情來用看看好了 :o

Ubuntu 上 ttf-fireflysung 的 PPA

目前只能在 2012/02/04 的「Index of /fonts/FireFly」與 2015/03/20 的「Index of /apt/firefly-font」找到 1.3.0 的蹤跡,而 FreeBSD Ports 裡的 chinese/ttf-fireflyttf 則是又修正了一個版本 (1.3.0p1),把一些字型修正掉了:

將『角』部首及偏旁的字修改成教育部標準寫法。
Edward G.J. Lee

找了找 Ubuntu 下有沒有現成的套件,由於沒看到對應的版本,就決定自己做一份出來了:「PPA for ttf-fireflysung」,然後在 16.10 的 Yakkety Yak 也支援了...

這個由文鼎當初捐贈的字型而修出來的版本還是頗好用的...

OpenType Font Variations

AdobeAppleGoogle,以及 Microsoft 聯手推出新的 OpenType 規格,讓字型變得更小:(沒有找到 Apple 的新聞稿...)

Google 給了兩個範例:

Adobe 也給了範例:

藉由額外的定義來描述字的各種變化,而不是直接設計多個字型塞進檔案裡。這樣可以減少字型的大小。

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

Adobe Typekit 對 PageSpeed 的妥協

Adobe Typekit 是個收費的網頁字型服務,為了讓變更可以儘快生效,用了比較短的 cache time:

We use a short cache time for the kit JavaScript so that you can update your kit (for example, adding fonts, or changing the list of allowed domains) and have your changes live in a reasonable amount of time.

但這也造成了不少人抱怨 Google PageSpeed Tools 會扣分,而實際上也的確降低效率 (因為你不需要天天改設定):

Adobe 給了妥協的方案,你可以選擇使用更長的 cache time,從本來的 10 mins 變成 1 week:「Improved caching for kits: Opt for longer cache timeout」。

這個選項使得 Google PageSpeed Tools 不會扣分,也讓效能再更好一些。

Archives