看板 Knuckles_note
作者 標題 [轉寄] Re: [閒聊] CSS font-family 順序
時間 2010年07月21日 Wed. AM 02:58:01
看板 Web_Design
作者 標題 Re: [閒聊] CSS font-family 順序
時間 Wed Jul 14 01:23:33 2010
因為之前照顧了中文版火狐，
來補完 Even 這篇關於字型 fallback 的文章，順便怨念一下
長文，只想看結論請 end
※ 引述《evenwu (EvenWu)》之銘言：
: 如此一來可以透過技巧指定中英文不同字體，例
: font-family: Arial, '新細明體', sans-serif;
: 遇到英文的時候，會先看 Arial 能不能用
: 因為可以用所以英文會先套用 Arial 字體
: 遇到中文的時候，會先看 Arial 能不能用
: 因為 Arial 沒有中文字不能用，所以就再看下一個'新細明體'
: 由於'新細明體'字體裡面有中文可以用，所以中文就套用了'新細明體'
: 阿萬一都通通沒有，就以瀏覽器指定的 sans-serif 字體為主
: 如果 sans-serif 字體沒有中文字
: 就會去找系統內的 fallback 順序找到中文字體
解釋一下什麼是「sans-serif」，
在 css 標準裡面這稱為 generic font name，通用字型名稱，
指定這個字型名稱代表你告訴瀏覽器這段文字要用「非稱線字」來顯示，
而且不在乎用 Arial 或是 Helvetica，反正就選瀏覽器認為最適合的。
但是呢，現在的瀏覽器粉聰明，這個世界當然沒有這麼美好，
不同瀏覽器，在不同作業系統，在不同的語系設定，選定的字型是不一樣的。
1 2 3
（有沒有發現這裡有三個變數，用二維表格列不出來）
以 Firefox 中文版來說，
sans-serif 會展開變成另一組 font-family:
<font.name.sans-serif.zh-TW>, <font.name-list.sans-serif.zh-TW>
預設值的 Windows Fx 的值 (可以用 about:config 查看修改）是
font-family: Arial, 新細明體, PMingLiu, MingLiu
新細明體出現兩次是因為非中文版 Windows 無法理解中文字型名稱。
當然，這組順序又會根據 Even 上面提到的方式做 fallback
... 以上是三個變數都知道的情況，接著討論變數變化 ...
＊先討論變數 2，作業系統，這最簡單：
每個系統有的字型不一樣，所以瀏覽器的預設值不一樣
Fx 在 Mac 上面的預設值是 Arial, LiGothic ... 我忘了，
詳情可以去看 Mozilla 的 source code (開放源碼萬歲！）
在 Linux 很更有趣，Fx 的預設值就是系統的 sans-serif 字型，
那你說這字型哪來的？
嘿嘿，Linux 的 /etc/fonts/fonts.conf 和 /etc/fonts/conf.d/
會載入一系列的字型描述檔（從字型套件來的）決定順序，
然後一樣用 fallback 原理組出一個 sans-serif 字型。
GNOME 和 KDE 的畫面預設字型就是用它。
＊變數 1 ，瀏覽器：
Fx 的設定值，如上所述，about:config 可以查到，也可以修改，
但是如果是不會用 about:config 的普通地球人，
只會用工具 - 偏好設定(選項) 來修改字型的話，
他只能改到 font.name.* 的值，font.name-list.* 是碰不到的，
這對中文這種需要兩個以上的系統字型才能拼湊出好看的字型的語言非常討厭
（想想如果是 font-family: 新細明體 然後該區塊剛好是一段英文，那一定很醜）
（簡體中文的 font-family: 宋體 又更慘，不過對岸的人好像習慣了？）
我一直很想找人寫 Power Fontconfig 之類的套件，不過懶惰所以就沒做
不過先說，Fx 預設會設定成 Arial 在最前面是故意的，
五年前 piaip 在 Firebird 0.8 的時候送去的修改。
IE 的話，網際網路選項裡面有字型設定可以選字型，
不過就落入了剛剛提到的只用一個字型來描述 san-serif 的問題，
導致了一個英文卻沒有指定語言是英文的網頁在不同語系的 IE 會用不同字型顯示..
Chrome 的話，雖然 Chromium 是開源軟體，
但是很抱歉，設定是寫死在 C++ 程式碼裡面的，顆顆
之前還很腦殘的把繁中也設定在新宋體上面 ... 超醜 後來有人丟 bug 改好了
不過普通地球人看不出來還是用得很爽所以我也沒辦法（攤手）
＊最後討論變數 3，語系：
這個超級麻煩，影響的順序分別是：
- 該元素的 lang 屬性，例如 <span lang="zh-TW">中文</span>
- 整個文件的 lang 屬性，像是 <html lang="zh-TW" xml:lang="zh-TW">
後者是過時的 xHTML 會用到（天哪我竟然說 xHTML 過時了，時代在進步呀）
- 網頁的編碼，是的，大部分的瀏覽器會根據編碼很自作聰明的切換顯示語系
同樣內容的網頁，用 big5 送出來跟用 UTF-8 送出來，瀏覽器會選的字型不一樣
- 黑盒子＋骰子
真的，尤其是 IE，好像會根據字詞分佈來選定瀏覽器該用什麼語系的字型顯示
- 最後，瀏覽器的預設語系。
頭暈了對吧？這一切都是因為微軟當年的設計 IE 的理念 - 自作聰明，
所以才會有這麼多邏輯在後面判斷。
因此在現在的 web 上，下面的事件都是血淋淋每天在發生的。
* 不同作業系統網頁開起來字型不一樣。 <-- 這還正常
* 不同語系的 Windows ，即便有同樣的字型，
網頁開起來字型不一樣。 <-- 這你第一次聽說吧
* 同樣都是中文版 Windows，把 Chrome 的介面語系從英文切換成中文
字型看起來字型不一樣
* 不知道要指定 lang=zh-TW，只知道指定 lang=zh 的網站 （例如：Facebook），
繁中的內容會用新宋顯示。而且回應區塊用的字級剛好是新宋沒有點陣字
看起來最霧的那個。
* 在瀏覽器的選單改不同的編碼顯示網頁，網頁字型看起來不一樣。
好，結論，
所以身為 Web Developer ，我們應該要做什麼呢？
* 指定網頁編碼，UTF-8。如果還不知道這是什麼拜託還是轉行吧。
* 指定網頁語系， <html lang="zh-TW">
* CSS 檔案也要指定編碼不然中文字型名稱會被吃掉
（檔案開頭加上 @Charset "UTF-8";）
* 用上篇文章的原則對各大作業系統指定想要用的中英字型，
極力避免瀏覽器 fallback 到 sans-serif, serif 通用字型。
（我建議用 font-family: Arial, 'LiHei Pro', 新細明體, sans-serif
h1,h2,h3 等大字再用
font-family: Arial, 'LiHei Pro', 微軟正黑體, 新細明體, sans-serif
因為正黑體的 ClearType 有問題，小字看起來太細
）
如果做國際網站的話最後一點尤其麻煩，
因為不可能每個語言的作業系統都裝來看有什麼預設字型。
所以才會出現 Facebook 那種就 sans-serif 丟出去然後禱告的 CSS ...
(可是他又不把語系設定好 ><)
==
其他還有瑣碎的問題，例如
拼裝字型的基線位置可能會錯亂（如果瀏覽器沒做好），
不同語系之間的文字間距（如果瀏覽器沒做好），
斷行演算法的中文處理能力（如果瀏覽器沒做好），
稱線這東西對漢字字型的意義（稱線字 = 宋體，非稱線 = 黑體？）
Unicode 的 bug，像是 CJK ambiguous character 問題
（其實兩岸印刷體不同筆劃的字竟然會指定到同一字碼也算是 Unicode 的 bug）
這些不是這篇文章的討論範圍，有空再說
==
Web_Design 板第一篇耶，不知多少銀
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 140.115.31.131
※ 編輯: timdream 來自: 140.115.31.131 (07/14 01:28)
推 :太神了... 研究的真仔細！推...1F 07/14 01:34
→ :我發現我講了一堆通用字型名稱的行為，最後結論是2F 07/14 01:52
→ :請大家想辦法不要碰到通用字型... 但是還是要指定啦
→ :請大家想辦法不要碰到通用字型... 但是還是要指定啦
推 :是呀，能指定就指定，避免意外的狀況就是設計4F 07/14 02:02
推 :挑一個錯字 "襯"線 :P5F 07/14 02:02
推 :讚耶~ 超實用~6F 07/14 02:17
推 :值得一堆的整理！7F 07/14 10:03
推 :推！8F 07/14 10:21
→ :那請問？使用'PMingLiu'或'Microsoft JhengHei'會比使用9F 07/14 10:23
→ :'新細明體'或'微軟正黑體'的字樣好嗎？
→ :'新細明體'或'微軟正黑體'的字樣好嗎？
推 :雖然看不懂，但是一定要推！11F 07/14 10:32
推 :話說我以前也以為 SimSun 是新宋，但應該其實是簡體宋?12F 07/14 10:51
推 :推一個!!! 這一篇文章值 647 元13F 07/14 12:00
推 :贊！列入預設樣本設定中保存...14F 07/14 13:56
推 :@jojozyzy：英文系統用'PMingLiu'，中文系統用'新細明體'，15F 07/14 14:15
→ :font-family:'PMingLiu','新細明體';/*才不會miss*/
→ :font-family:'PMingLiu','新細明體';/*才不會miss*/
→ :了解，感謝樓上的解答。17F 07/14 14:45
推 :啊,,,我end了>"<18F 07/14 15:22
推 :推19F 07/14 17:17
推 :推一下邊看邊讓人覺得心酸的認真文 :p20F 07/14 20:19
推 : 我end了>"< 但還是要推~21F 07/14 21:18
推 :我看完了..但看不懂..><22F 07/14 21:44
推 :推23F 07/17 18:26
--
※ 來源: DISP BBS 看板: Knuckles_note 文章連結: http://disp.cc/b/11-btQ
※ 看板: KnucklesNote 文章推薦值: 0 目前人氣: 0 累積人氣: 2312
回列表(←)
分享