Skip to content

Instantly share code, notes, and snippets.

@yorkxin

yorkxin/README.md

Last active Aug 10, 2016
Embed
What would you like to do?
Safari 6 Default Font Fallback Fix (for CJK users)

Safari 6 的預設字體也崩潰了

跟 Chrome 一樣, Safari 6 也使用 html tag 的 lang attribute 來判斷要用哪一套字體來 fallback (參考這裡)。以繁體中文的 zh-TW 為例,它會 fallback 到 Heiti TC (黑體-繁),不只漢字,連英文、數字都套用。我不喜歡這樣,理由:

  1. Heiti TC / Heiti SC 的英文與數字很醜。
  • Heiti TC / Heiti SC 的日文假名也很醜,注音符號更醜,後者尤其是讓我身為台灣人卻沒感到尊重。
  • zh 視為 zh-cn ,所以如果到了 維基百科 ,你就會看到簡體版的 Heiti SC (黑体-简),也就是中國國家標準的漢字及標點符號;不是看到簡體字,而是某些字筆畫有些不同,以及標點符號從正中間挪到左下方(參考漢字標準格式・標點樣式)。
  • 出於個人偏好,我對整個 OS X 設定了繁體中文(Hant)、簡體中文(Hans)都使用 Hiragino Sans GB (冬青黑體)而非預設的 Heiti TC / Heiti SC,雖然標點符號不符合台灣的規範,而且一樣有漢字寫法的問題,但字比較美。 Safari 的行為把這一原則給推翻了,我又看到了 Heiti TC / Heiti SC (怒)。

這裡提供一個解決方法

  1. 把下面的 font-fix.css 下載到你的電腦裡面。
  2. 在 Safari 6 打開偏好設定→進階→樣式表,瀏覽到 font-fix.css 這個檔案。
  3. 不用重開 Safari 就能看到效果了。

Update: 包成 Safari Extension

以下是修改前後的示意圖(以我的系統為例,因為我把預設字體改成 Hiragino Sans GB ,所以你的效果可能跟我的不太一樣):

@font-face {
font-family: sans-serif;
src: local("Helvetica");
}
@font-face {
font-family: serif;
src: local("Times");
}
<!DOCTYPE html>
<html lang="zh-tw"><!-- also try zh and zh-cn -->
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Test lang=zh-tw</title>
</head>
<body>
<p style="font-family: sans-serif">(sans-serif) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.ㄅㄆㄇㄈㄚㄛㄜㄝ。5566得第一。 好,卻不能稍超興奮,是不容有異議,這邊門口幾人,隔晚,悠揚地幾聲洞簫,併也不見陶醉,這回在奔走的人,鑼聲亦不響了,總值不得市長一開口,乃和以森羅殿的還形復體水,完全打消了。</p>
<p style="font-family: serif">(serif) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.ㄅㄆㄇㄈㄚㄛㄜㄝ。5566得第一。 好,卻不能稍超興奮,是不容有異議,這邊門口幾人,隔晚,悠揚地幾聲洞簫,併也不見陶醉,這回在奔走的人,鑼聲亦不響了,總值不得市長一開口,乃和以森羅殿的還形復體水,完全打消了。</p>
</body>
</html>
<!-- 中文假文出自 Handlino 的 moretext: http://more.handlino.com -->
@lianghai

This comment has been minimized.

Copy link

@lianghai lianghai commented Jun 13, 2012

Safari 和 Chrome 的情况似乎不一样。Chrome 是猜的,而 Safari 遵循 lang 属性。
为什么不把 DefaultFontFallbacks.plist 里 zh-Hans 的部分也改成冬青黑体简体中文?冬青黑体简体中文本来就是简体中文字体,而你把系统繁体中文默认字体改成它,却让简体中文保留 黑体-简,这个太奇怪了。

@yorkxin

This comment has been minimized.

Copy link
Owner Author

@yorkxin yorkxin commented Jun 13, 2012

Chrome 也會根據 lang 去判斷,根據直接在 inspector 裡面改 lang attribute 來實驗的結果。Chrome 開放了這一部份的 API (experimental) ,我寫了一個 extension 可以自動把他自己設定的 fallback font 給改回來。

還有我在 DeafaultFontFallbacks.plist 裡面,是把 zh-Hans 和 �zh-Hant 都改成 Hiragino Sans GB 的。

@lianghai

This comment has been minimized.

Copy link

@lianghai lianghai commented Jun 13, 2012

啊……抱歉,我看花眼了……
但如果 DeafaultFontFallbacks.plist 里已经把 Heiti TC 都改掉了,怎么还会显示出 Heiti TC 呢?是因为没改全吗?

@yorkxin

This comment has been minimized.

Copy link
Owner Author

@yorkxin yorkxin commented Jun 13, 2012

圖中上面三個是 Safari 6.0 預設的情況,下面三個是修改過後的結果,也是我期望中的樣子,裡面應該是沒有 Heiti TC 。至於文中的描述是為了適應大部份使用者的情況。

@ShikiSuen

This comment has been minimized.

Copy link

@ShikiSuen ShikiSuen commented Sep 12, 2015

@lianghai >

Safari 有著獨立的網頁字體回退設定,到目前 El Capitan 系統也是如此。我將系統日文介面字體換成思源黑體(CTPresetFallbacks.plist 和 DefaultFontFallback.plist 這兩處都改了),但持原廠組態的 Safari 在讀取某些網頁(比如 Twitter)的日文內容時還是會給你用冬青黑體來顯示(而不是直接讀取 DefaultFontFallback.plist 當中的「sans-serif」小節內所指定的 CJK 字體)。

@ShikiSuen

This comment has been minimized.

Copy link

@ShikiSuen ShikiSuen commented Sep 12, 2015

@CHITSAOU >

您這套工具目前而言還只是 Workaround,
這會破壞瀏覽器可在某個網頁內分別藉由不同地域標準的字體顯示某個CJK字符的職能。

但,Safari 就這個職能而言的表現並不算優秀:

目前的 Safari 不只是「不應該就這個環節的設定另起爐灶」,而且對非 CJK 漢字的字體回退也完全不跟著瀏覽器預設的西文字體設定來走。

這種鬼問題,論及其唯一的解決思路(是 Solution 而不是 Workaround),就是讓 Safari 直接讀取 DefaultFontFallback.plist 當中的「sans-serif」小節內所指定的 CJK 字體。

我去寫個 Apple BugReport,縱使那群人永遠都是愛理不理…但我寫總比不寫要強。

@ShikiSuen

This comment has been minimized.

Copy link

@ShikiSuen ShikiSuen commented Sep 12, 2015

@Chitsaou >

另外,不用寫「exclusively for Chinese users」了,因為這玩意適用於所有 CJK 使用者。

@yorkxin

This comment has been minimized.

Copy link
Owner Author

@yorkxin yorkxin commented Sep 13, 2015

@ShikiSuen thanks, 這的確只是對應某個中文字體的我流 workaround,感謝你去 Apple BugReport 回報!不過 Chrome 自成一家之後應該還要去 Chrome 回報才行。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment