Re: [-Fx-] Firefox 內建字型成像設定整理

[t7yang (t7: 我認為這是一種背叛)]

這篇算是針對我之前的文章又做了一次補完
讓文章的整體性更強，從內建字型成像設定說明
到字型選擇、使用者樣式解決泛東亞字型顯示一致性
（目前只有做到中文部分，未來或許會擴充）
一次過整合在同一篇文章內


※ 引述《t7yang (t7: 我認為這是一種背叛)》之銘言：
針對這篇文章 #1J4fUnkT(Browsers) 討論到完全偏掉（XD）的字型設定主題做了一些整理
原始文章：http://t7yang.blogspot.tw/2014/03/fx-font-render-settings.html

除了利用 Mactype 或 GDI++ 等成像軟體來輔助字型的成像外，Firefox 其實也內建了字
型成像的選項供使用者調整。這些選項預設是停用的，知道的人可能相對較少，所以常常
就必須面臨是否要放棄硬體加速來換 Mactype 成像的困境，但其實可以兩全其美。


選項            說明及建議
gfx.font_rendering.directwrite.enabled
TRUE／FALSE     啟用字型成像，必須啟用後底下的設定才有效果

gfx.font_rendering.cleartype_params.pixel_structure
0 = Flat        像素結構，液晶螢幕使用1（RGB）
1 = RGB
2 = BGR

gfx.font_rendering.cleartype_params.gamma
2200 / 1800     Gamma 校正值，標準：Windows 2200、MAC 1800

gfx.font_rendering.cleartype_params.cleartype_level
0～100          ClearType 的強度，數值越高字越平滑，但也可能越模糊。
                一般建議落在 50～80之間即可。

gfx.font_rendering.cleartype_params.enhanced_contrast
0～1000         對比度，數值越高越銳利，字也會越粗。一般建議落在
                200～500之間即可。

gfx.font_rendering.cleartype_params.rendering_mode
0 = Default     成像模式，可以根據自己的系統反覆嘗試何種模式最舒服，
1 = Aliased     不須重新啟動瀏覽器即可以看到效果
2 = GDI Classic
3 = GDI Natural
    Widths      其中「Default」、「Natural」、「Natural
4 = Natural     Symmetric」是不錯的選擇。某些電腦在選擇
5 = Natural     「Aliased」後介面文字可能會完全看不到。
    Symmetric

gfx.font_rendering.cleartype_params.force_gdi_classic_for_families
字型名稱        這個清單的字型會強制使用傳統GDI的方式成像，
                某些較適合使用GDI進行成像的字型可以加入這個清單

gfx.font_rendering.cleartype_params.force_gdi_classic_max_size
數字            強制使用傳統GDI方式成像的最大大小，
                應該跟上一個選項是連動的

gfx.use_text_smoothing_setting
TRUE／FALSE     開啟平滑設定（用於 Mac 系統）

gfx.font_rendering.cleartype.always_use_for_content
TRUE / FALSE    對所有內容啟用ClearType成像

browser.display.auto_quality_min_font_size
數字            決定在哪個字級以上使用高品質成像（註1、註2）


註1：http://kb.mozillazine.org/Browser.display.auto_quality_min_font_size
註2：https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering

基於篇幅的因素，更多細節說明請參考O2FP頁面的［內建設定］->字型效果分類
O2FP傳送門：https://goo.gl/bv6hW

參考來源：
http://blog.timshan.idv.tw/2013/06/howto.html
https://addons.mozilla.org/zh-tw/firefox/addon/anti-aliasing-tuner/
http://mikawaffle.blogspot.tw/2012/02/firefox.html
並加入部分個人的建議
測試 Firefox 版本：28 beta

除了自己開啟 about:config 來敲敲打打之外，如果習慣使用圖形介面來操作的話，也可
以安裝Anti Aliasing Tuner。

https://addons.mozilla.org/firefox/addon/anti-aliasing-tuner/

字型的選擇
除了成像的參數之外，其實中文世界中最大的閱讀愉悅度的障礙其實來自於字型本身。因
為中文世界中非常缺乏高品質的字型（就算是付費的字型）。在作業系統上：

※各常見作業系統簡單介紹
MAC：
有先天的「蘋果基因」優勢，很大程度的克服了瀏覽器中文字難看的問題。除了行之有年
「儷黑PRO」和「黑體 TC」外，也有一些使用者會偷渡使用品質更好的日文冬青黑體。

Windows：
直到微軟在Windows Vista內建「微軟正黑體」後，微軟作業系統的使用才有一款比較好
看的無襯線黑體字型（最重要的是微軟正黑體符合國字標準字體的規範。在此之前，不少
使用者偏好使用日文字型。

Linux：
一般來說文泉驛黑體是Linux 使用者的首選，但其實這款字型是修改自 Android 的
Unicode字型，並根據對岸的標準規範來修改的。

常見的中文無襯線比較可以參考這裡。

※字型選擇輔助圖
非常在意字型符合國字標準字體
是

    偏好無襯線字型
        是
            微軟正黑體（Windows Vista+內建）
        否
            標楷體（Windows 內建）

否

    偏好無襯線字型
        是
            微軟雅黑（Windows Vista+內建）
            SimHei（Windows內建，簡體字型）
            Arial Unicode MS（Windows 內建，有中文Unicode 字型）
            明瞭體（Windows Vista+內建，日文字型，日語：メイリオ，英文：Meiryo
            ）
            MSGothic（Windows內建，日文字型）
            Yu Gothic（Windows內建，日文字型）
            信黑體（付費中文字型）


一些 Windows 使用者甚至也會想辦法取得MAC的中文或日文字型，並使用在Windows 系統
上已取得更好的視覺享受，再此就不多做討論。



套用KillSerif Style補完最後的拼圖

設定好文字成像之後，接著還必須處理瀏覽器以甚麼字型來顯示。在螢幕顯示的情況，
無襯線體的顯示效果要優於襯線體，因此黑體或圓體這類無襯線體是較好的選擇。
但Firefox本身並沒有針對泛東亞使用者最佳化顯示字型的設定。因為僅透過內建字型
設定並不能有效的讓泛東亞字型的顯示有一致性，就算開發團隊解決了圖示字型與
文字字型分離設定的問題，但並不因為使得泛東亞字型的設定變得可接受。

所以，目前仍需要藉助外部的力量進行調整。KillSerif Style或許是其中一個
目前最佳的選擇，仔細閱讀它的使用指南，根據你的使用的瀏覽器進行設定，
搭配上述的內建設定，你應該可以取得最接近理想的顯示效果。

KillSerif Style傳送門：https://userstyles.org/styles/111687/killserif-style



中文字型的悲哀

從上圖的「字型選擇輔助圖」可以清楚地看得出來，目前要找到一個符合「國字標準字體」
規範的無襯線字型，唯一的選擇只有微軟的「正黑體」，更別說「微軟正黑體」
在經歷了數代的更新之後仍存在許多問題（某些字在粗體顯示時會在右邊出現一個全型的
中文空格、多年來為人詬病的字重不夠、顯示小號文字時非常難看等），這也造成許多
使用者寧願放棄符合國字標準字體的微軟正黑體，而選擇敵國的開放的文泉驛黑體。

除了是因為整個中文世界缺乏優秀的字型開發商（這個問題可能跟字型容易被流傳在
網路上且華人社會較沒有付費購買字型的觀念有關），作業系統廠商也較不願意投資在
中文字型的打造上（尤其台灣市場太小，多數使用者對字型要求與認識也不高）。


備註：
本文只是簡單針對 Firefox 內建的字型成像選項做了一些簡單的整理與介紹，
其中在字型的選擇上著墨比較多的是以 Windows 使用者的觀點出發。若發現任何錯誤
或不完整的資訊，歡迎糾正和補足。





整理完後發現文章好像真的太長了，需要關照一下懶人

1. 按照每個設定調整，通常有給建議值是甚麼。gdi_classic的部分如果不需要就放著
   不需要管。很多人喜歡文字要夠黑，關鍵就在對比提升的數值，越高就越粗。
2. 安裝Stylish套件
3. 安裝KillSerif Style。仔細閱讀相關的使用指南，主要是內建字型設定，把對應的
   字型設定到KillSerif Style中（如果是預設的微軟正黑體就不用設定）
4. 享受你的Firefox帶來的視覺饗宴


Q: 有沒有更懶的方法？
A: 有，直接安裝 Anti Aliasing Tuner，內建成像設定那部分直接有圖形介面。


Q: 還是很麻煩，有沒有更懶的方法？
A: 有，買一台尊爵不凡的MAC，然後望向我們這群還需要自己手動調整的使用者說：魯蛇

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 140.113.38.77
※ 文章網址: https://www.ptt.cc/bbs/Browsers/M.1459692011.A.C3B.html
※ 編輯: t7yang (140.113.38.77), 04/03/2016 22:02:47
推 jmlntw: 我已經放棄在 Windows 上追求好看的字型這件事了 XD
→ jmlntw: 用 Linux 的話倒是全部統一成思源黑體
推 hsparrot: 放棄之後，海闊天空。微軟正黑打遍無敵手!
→ t7yang: 這也是無可奈何的事情WIN底下OTF好像怎麼都不好看
→ t7yang: 倒是真的用FX內建的成像參數調整後瀏覽器的文字就會很好看
→ t7yang: 夠黑夠粗，除了正黑體原生的那些鳥BUG外，真的已經很棒了
推 mayuyu: 推內建渲染(DW)參數+stylish 雖然還是比MacType渲染淡一點
→ mayuyu: 不過日常看起來已經不會覺得線條破碎或者是太模糊
→ mayuyu: http://i.imgur.com/hbrXHSg.png
→ t7yang: ma大這介面改動頗大啊（笑）而且看起來是用droid sans家族
→ t7yang: 或衍生。話說directwrite有沒有中文翻譯？
推 WFXX: 有安裝mactype本篇還有用嗎? 還是說不衝突?
→ t7yang: 記得以前有辦過一個Opera介面分享的活動，現在轉用FX
→ t7yang: 好像應該也來辦一場 XD
→ t7yang: 有安裝mactype的話，跟內建成像的功能應該就重複了
→ t7yang: 可以直接跳到killserif style那裏把中文字型一致性的問題
→ t7yang: 解決就好了
推 WFXX: 感謝大大熱心回應QAQ 利馬試試看
※ 編輯: t7yang (140.113.38.77), 04/03/2016 23:52:46
推 hohiyan: 信黑體不符合國字標準字體啊？ @_@
推 mayuyu: @t7yang大 介面因為原本的矩形分頁用習慣了
→ mayuyu: 所以一直沒有換成Australis的弧形分頁
→ mayuyu: (我是用CTR回復的，再參考userstyles改成有點Metro的樣子)
→ mayuyu: 字型是夏夏製作「花明蘭秀月」，是從明瞭體和蘭亭黑
→ mayuyu: 修改來的，可能有些習慣上的不同會覺得怪怪的，
→ mayuyu: 例如標點符號、舊字體的問題，不過閱讀起來還蠻清楚的，
→ mayuyu: 所以閱讀的時候為了省力我都選擇這個字體。
→ mayuyu: directwrite好像沒有中文翻譯耶，我也不知道要怎麼翻比較
→ mayuyu: 像hinting也是找不到傳神貼切的翻譯，就直接用hinting xDD
推 tsukiyo99: 想問mayuyu大大 花明蘭秀月會有缺字的情形嗎
→ oversky0: 教育部有標準宋體、楷書、隸書字形檔。
→ oversky0: http://is.gd/nqxGFU
→ oversky0: CNS 之前也有出宋體、楷書，不知和教育部的一不一樣。
推 mayuyu: 很少遇到缺字 應該包含大部分正體中文、簡中、日、韓文字
→ mayuyu: (注意有些日文漢字的寫法是錯誤的 台中日的漢字寫法不同
→ mayuyu: 即使是號稱標準字型的寫法都不完全正確
→ mayuyu: 所以花明蘭錯得不算離譜
→ mayuyu: 但是如果你要學習標準漢字寫法 就不能參考這個字體
→ mayuyu: 建議拿來閱讀使用就好)
→ mayuyu: 如果真的遇到缺字 用t大的KillSerif Style樣式的話
→ mayuyu: 即使有缺字也可以用第二順位的字體補上
→ mayuyu: src: local(" "), local("Microsoft JhengHei");
→ mayuyu: 第二順位就是微軟正黑體("Microsoft JhengHei")
→ mayuyu: 你可以在前面或後面自己加替補的字體
→ t7yang: @hohiyan: 信黑體的作者是香港人，他完全沒有必要根據
→ t7yang: 台灣教育部的規範走。而且要辨識是否符合很簡單，找一個
→ t7yang: 艸部的字一看就知道 http://www.vmtype.com/img/02.png
→ t7yang: @其實Droid Sans本身是不錯看，用在螢幕顯示上很棒，只是
→ t7yang: 只是對它的標點符號和一些字的寫法不是那麼習慣
→ t7yang: 所以才沒有用，在WIN底下正黑體還算堪用。
→ t7yang: @mayuyu大
推 hohiyan: 原來如此。是我誤會了，我一直以為字體作者是台灣人 XD
→ t7yang: 這個誤會還真大（笑
推 mayuyu: @t7yang大 Droid Sans真的蠻好看 不過我沒試過在Win
→ mayuyu: 底下渲染看起來怎麼樣
→ mayuyu: @tsukiyo99大 這個字體可能不好找 我補一下連結
→ mayuyu: 無襯線 黑體 花明蘭 ver.6.1(修改了明蘭終部分舊字體
→ mayuyu: 比較符合現代閱讀習慣)
→ mayuyu: http://is.gd/o9ddcX
→ mayuyu: 如果你需要等寬字體 要下載明蘭終 另外用裡面的
→ mayuyu: MingLan_Mono來搭配花明蘭
→ mayuyu: 如果你需要分別清楚，容易辨識的英數字來閱讀程式碼
→ mayuyu: 例如區分O和0 要下載明蘭終 用裡面的MingLan_Code
→ mayuyu: 明蘭終 http://is.gd/91GO9j
→ mayuyu: 襯線 明體 秀月(完整的名稱其實是花秀‧月明，花秀月明)
→ mayuyu: http://i.imgur.com/ifuhq7b.gif
→ mayuyu: http://i.imgur.com/q982ZWS.gif
→ mayuyu: http://i.imgur.com/AYwbOjq.gif
→ mayuyu: 花秀月明 ver.3.1 http://is.gd/4nbREn
→ mayuyu: 二個合起來 一個用在襯線 一個用在無襯線
→ mayuyu: 簡稱為「花明蘭秀月」
推 tsukiyo99: @mayuyu 好的 我再試試看閱讀效果 感謝
→ t7yang: @mayuyu大: 喔，我還以為你的用的字型是droid sans衍生的
→ t7yang: 因為那個標點符號看起來好像。
→ t7yang: 1google了一下mayuyu大推薦的字型，也找到了一篇
→ t7yang: 舊文，似乎是對岸網友製作的，撮合了好幾個字型
→ t7yang: 而成。不考慮這些字型是否可以合法使用或重製的
→ t7yang: 情況下。也算相當有毅力。
推 mayuyu: 對啊 是夏夏做的 他是舊字體(康熙字體)的愛好者
→ mayuyu: 所以明蘭用了很多舊字形 是舊體字的寫法
→ mayuyu: 有些人認為舊體字保留較多的漢字的字理 也比較美觀
→ mayuyu: 所以不少人還是堅持用舊字體 但是好看的舊字體很少
→ mayuyu: 而明蘭是少數保留舊字體而且又好看的黑體
→ mayuyu: 不過明蘭也不全是康熙字體的寫法 有些是更舊的寫法
→ mayuyu: 可能夏夏有自己的字理見解 有些人可能會覺得不適應
→ mayuyu: 而通常這種混合字體會有整體風格不統一
→ mayuyu: 字距高低筆畫粗細參差不齊 設計構造粗糙不成熟的問題
→ mayuyu: 不過明蘭很奇蹟的竟然修改得很和諧、很好看w
→ mayuyu: 尤其是正體中文、簡體中文和日文三種字混合一起出現的時候
→ mayuyu: 明蘭看起來融合得非常完美 非常的整齊
→ mayuyu: 不過有些漢字的寫法對於現代標準來說是錯誤的
→ mayuyu: 或者說很少在使用的
→ mayuyu: 由於明蘭把許多當用漢字都替換成了舊字體
→ mayuyu: 所以不適合拿來學習現代標準的寫法
→ mayuyu: 不過因為我也喜歡舊字體 所以我覺得看起來特別舒服xD
→ mayuyu: 抱歉佔用篇幅再補充一下
→ mayuyu: 在Fx用KillSerif Style+明蘭的時候 樣式裡面
→ mayuyu: @font-face {
→ mayuyu: font-family: "Arial";
→ mayuyu: unicode-range: U+4E00-9FFF;
→ mayuyu: font-weight: 400;
→ mayuyu: src: local("H-MingLan-Regular");
→ mayuyu: } 的後面要再加上一段
→ mayuyu: @font-face {
→ mayuyu: font-family: "Arial";
→ mayuyu: unicode-range: U+00-024F;
→ mayuyu: font-weight: 400;
→ mayuyu: src: local("Arial");
→ mayuyu: } 還有對應的粗體那邊也同樣加上
→ mayuyu:                 unicode-range: U+00-024F;
→ mayuyu:                 src: local("Arial Bold");
→ mayuyu: 不然有些網頁排版會亂掉 例如雅虎奇摩拍賣
→ t7yang: 3其實寫法的部分有些太細節的，在閱讀時基本上是
→ t7yang: 觀察不到的。畢竟人類在閱讀時是用掃描，以前做
→ t7yang: 過實驗，用一些安插了倒序的詞彙的文章給受試者
→ t7yang: 閱讀，多數都不會發現文章有異樣（笑）。只是標
→ t7yang: 點符號就真的很顯眼，然後我又很在意（應該說我
→ t7yang: 比較喜歡台灣的寫法，完全置中，而不是像中日韓
→ t7yang: 這樣在角落），所以這就是為什麼我沒辦法接受一
→ t7yang: 些網路流傳很廣很多人用的黑體。如果可以學會如
→ t7yang: 何修改字型，我應該會自己修改吧，只是目前完全
→ t7yang: 沒碰過，不知道怎麼下手。不然想日本不少思源的
→ t7yang: 衍生黑體和圓體其實也不錯看。 00-024F看起來似
→ t7yang: 乎是蠻前面的，這段應該沒有影響到才對。知道是
→ t7yang: 甚麼問題造成的嗎？如果是CSS程式碼可以排除的
→ t7yang: 問題就應該修正一下。 花了一點時間做了一個小
→ t7yang: 工具，自動連推格式書籤小工具，有興趣的人可以
→ t7yang: 嘗試一下，看看有沒有問題。
→ t7yang: https://github.com/t7yang/autopushlet/releases/
→ hohiyan: 我說麻友友跟t7你們兩個就應該直接各回一篇文啊 XD
→ mayuyu: @hohiyan 一開始沒想到會寫那麼多行 結果越寫越多orz
→ mayuyu: 排版亂掉只有使用明蘭字型的時候會遇到
→ mayuyu: 所以只有用明蘭的時候需要加上 一般人不會用到
→ mayuyu: 所以我只是在這裡順便提一下 如果有試用明蘭字型的話
→ mayuyu: 記得一定要加在後面才有效 chrome沒有這個問題所以不用加
→ mayuyu: 字型修改替換可以用FontForge 我記得有板友也是不滿意
→ mayuyu: 明蘭的標點符號位置所以有自行修改 我習慣了所以沒感覺w
→ mayuyu: 感謝製作連續推文的工具 這樣以後要霸佔推文就更方便了xD
→ mayuyu: >< 在BBSFox底下不能用
→ t7yang: 1嘿啊，我有寫在使用限制裡面。這點可能跟BBSFOX
→ t7yang: 本身有一些限制有關吧？我還不是很清楚，consol
→ t7yang: e log有跳一些訊息出來，但不是很確定是甚麼問
→ t7yang: 題。目前只能先切換到其他分頁再點書籤小工具。
→ t7yang: 等輸出好格式化的文字後複製並回到BBSFOX貼上。
→ t7yang: 因為不是高手，所程度只有這樣（笑
→ ettoolong: BBSFox 有內建一個自動連推的工具, 但是很陽春.
→ ettoolong: 徵人來幫忙改善啊.
→ t7yang: @_@，沒發現過有內建連推的功能。下午有玩了一下FX的套件
→ t7yang: 開發環境，webextension目前提供的api好像還是太少了
→ t7yang: jpm的話，才想要指定瀏覽器位置就一直不成功，就擱置了
→ ettoolong: 內建的推文工具: https://goo.gl/2wcc52
推 goldie: 未看先推！
推 MilchFlasche: 推認真
推 davidbright: 推一下這篇,g6用!