[情報] Firefox和Chrome的字體渲染效果

[mayuyu ((・ω・)ノ)]

先放幾張字體渲染效果
圖(1920x1080)不能放大縮小要1：1(100%)顯示才不會模糊失真

Firefox
http://i.imgur.com/B2JdEBX.png
Chrome
http://i.imgur.com/p0r5sxI.jpg
Firefox
http://i.imgur.com/4QI1tSt.png
Chrome
http://i.imgur.com/07DdUR4.png
Firefox
http://i.imgur.com/pLwbWtN.png
Chrome
http://i.imgur.com/f7vCBls.png
Firefox
http://i.imgur.com/dMQtuaa.png
Chrome
http://i.imgur.com/5P458zV.jpg

日文
http://i.imgur.com/701yoqG.png
簡中
http://i.imgur.com/pLnHXJC.png
好讀
http://i.imgur.com/p6mdoYz.png

我平常看文章的瀏覽器都是用火狐，因為火狐很早就支援
微軟的DirectWrite字體渲染加速，在以前的時候
如果系統沒有用Mactype另外做字體渲染，Chrome開起來的字體
實在不能看，文字的線條很細，顏色淡到快看不到，而且邊緣支離破碎，
線條比較密集的文字就會整個黏在一起、糊成一團。
所以那時候兼顧瀏覽器硬體加速的效能，還要看起來輕鬆易讀不傷眼，
我最好的選擇就是用火狐來閱讀文章，同時可以搭配ScrapBook來擷取網頁。

後來Chrome也開始支援DirectWrite，但是早期支援的效果很差，
文字破碎得更嚴重，有些系統甚至會發生文字消失，介面變成一片空白的情況，
所以當時大家都是進chrome://flags，把實驗性的DirectWrite功能給停用。
又過了一段時間，Chrome的DirectWrite終於到了可以正常使用的程度了，
而且預設也改成是開啟的，但是很可惜Chrome沒有開放參數給大家調整，
字體渲染的效果和強度都是固定的，使用者不能隨自己的喜好改變。

我當時有比較了一下Fx和Chrome的渲染效果，覺得自己調整後
還是Fx看起來稍微好一點，再加上Fx有二個模擬平板觸控拖曳滑動的擴展，
可以在網頁上任何位置用拖曳或滾輪的方式來慣性滑動或滾動畫面
（請參考#1KiIIJVN），用桌機版瀏覽器看Pocket、Evernote Clearly、
Instagram、Pinterest、Twitter、Facebook等網頁，可以自由的拖曳滑動，
就像用手機版一樣方便，再搭配Imagus圖片預覽擴展，滑鼠游標移到圖片上
就可以預覽原始大圖，看500px、Flickr等圖片網站甚至更方便。

雖然Chrome也有類似的擴展，但是我覺得Fx版的比較好用，滑動更順暢。
再加上FireGestures的手勢操作幾乎無所不能，實在太好用，
（我很少需要去點擊標籤頁來開關分頁、跳轉分頁，也沒有按過
上下一頁的按鈕來前進後退，都是在原地畫手勢就可以完成這些操作）
所以後來仍然繼續使用Fx作為主要的閱讀工具。

幾個星期前，我突然注意到同樣開啟美好的一天首頁
http://skyinc.net/zh-tw/
Fx的字體渲染很慘，天氣和時鐘的數字邊緣都是鋸齒狀，
可是用Chrome開同一個網頁，數字的邊緣卻非常的平滑
http://i.imgur.com/j4E13Zq.jpg

很奇怪，看起來好像Fx的字體在這個網頁上沒有成功渲染，
但是Chrome也未免太平滑了吧？！
因為實在太奇怪了，所以我研究了一下，
結果發現差異是在於我使用的t7yang大寫的字體替換樣式
「KillSerif 明蘭秀月 Style v3.0」（#1JodN9L7）
將網頁常用的襯線字體替換為自己指定的無襯線字體，
讓網頁看起來更美觀、清楚，變得更好閱讀。

這個樣式最後有一個為字體加上陰影（稍微加粗加黑）的效果
/* 文字陰影效果，開啟後會有文字加粗的感覺，粗度建議範圍0.001~0.01em */
  body {
    text-shadow: 0 0 0.001em;
}

我有把它打開，Chrome開啟這個css渲染後，渲染效果非常強，
字體已經可以開始感覺到有一點霧霧的，但是還不到非常模糊的程度，
而且這樣顯示起來的效果字體邊緣非常平滑

而Fx同樣用0.001em，渲染效果卻很微弱，
我試了調整0.001em～0.014em，看起來效果完全一樣，沒有變化。
但是調整到0.015em的時候，渲染效果就突然增強了，瞬間跳了一級，
字體也變得非常平滑，但是卻比Chrome模糊一點，
也就是說渲染強度排起來比較的話：
Fx0.001em～0.014em < Chrome0.001em < Fx0.015em

Fx從0.014em到0.015em一下子就四捨五入跳了很大的一級，
沒有像Chrome0.001em那樣中間的效果。
所以我覺得很傷腦筋，Fx調0.014em效果太弱，調0.015em效果又太強。
我嘗試調整Fx的about:config裡面的gfx.font_rendering.cleartype.*
這一群調整字體渲染效果的設定，嘗試把硬體渲染的效果改銳利一點。
然後也換過css渲染的單位，改成text-shadow: 0 0 0.21px;
但還是沒有辦法，一經過css渲染以後，渲染的效果還是太強，
最終顯示的結果字體還是會變得霧霧的。

我已經很久沒有使用Mactype來渲染Fx，一直都是用Fx的硬體加速渲染。
百般無奈之下，我只好關閉Fx的硬體加速(Direct2D)，
讓Fx可以使用系統上的Mactype的渲染，用Mactype來試試看
能不能取得折衷的效果。

只要在Fx的選項設定中，把「可用時開啟硬體加速」這個選項取消勾選，
Mactype就可以成功渲染Fx。
但是用這個方法取消硬體加速會連OMTC圖層合成加速的功能也一起失效，
也就是layers.acceleration.disabled這一項參數會被設為true。
所以我不是直接取消勾選，而是在about:config中，單獨關閉Direct2D，
把gfx.direct2d.disabled設為true，重新啟動Fx。

這樣子就可以保留OMTC加速的功能，單獨關閉Direct2D和DirectWrite。
如果成功的話，在about:Support裡面會顯示
「已啟用 DirectWrite」false
「GPU 加速視窗」1/1 Direct3D 11 (OMTC)
「AzureCanvasBackend」skia
「AzureContentBackend」cairo
「AzureFallbackCanvasBackend」cairo

Azure圖形處理引擎的介面會從Direct2D變成skia/cairo，
同時「已啟用 DirectWrite」會顯示false，
但是「GPU 加速視窗」會顯示1/1，使用Direct3D或者是OpenGL，
如果這一項顯示的是0/1 Basic (OMTC)，代表OMTC加速啟用失敗。

使用Mactype渲染美好的一天
Firefox
http://i.imgur.com/2mdCt4K.jpg

看起來很完美。
不過我遇到幾個以前沒遇過的問題：

1. 新版的Fx改用skia/cairo + OMTC後，會變得很不穩定。
我使用的是pcxfirefox 35.0.1 x64的版本，
切換標籤頁的時候常常會發生卡住的現象，
Fx會暫時失去回應，而且時常發生閃退，程式會自己關閉。
我翻了一下bugzilla，目前已知skia/cairo在雙GPU上會發生問題，
同時也已經在37a版修復這個bug，可是我是單GPU 囧
或者是我使用的x64 + Mactype渲染組合的問題，
可能x86不會發生這個現象，我沒有測試。

2. 我將字體改為「明蘭」和「秀月」，結果Fx啟動的時候，
不會馬上載入無襯線的明蘭字體，英數字會變成有襯線，
要等經過120秒以後，英數字才會變回無襯線。
解決的方法：
將gfx.font_loader.delay的數值由120000改為1000（一秒鐘）
你可以自己修改延遲的時間長短。

3. 經過Mactype渲染後，網址列和標籤頁的文字會被削頭。
文字的頂端會有一部份不見，看起來好像被切掉一樣。
解決的方法：
Mactype新版有為這個問題提供一個參數作修正，
把下面的參數加到Mactype的ini設定裡：
;指定對Firefox.exe做文字削邊的修正
[[email protected]]
ClipBoxFix=1

加了這個參數以後，網址列和標籤頁削頭的現象就修正了，
但是我發現在某些網頁上，會變成文字的底端有輕微的削邊現象。

4. BBSFox裡移動游標的時候頁面更新會產生字體劇烈抖動的現象。
同時版面顯示，左右會稍微的擴大。
尤其是在BBSFox底下，OMTC + skia/cairo + Mactype更容易發生閃退的現象，
有時候剛開啟Fx，打開BBSFox滑沒幾下，Fx就瞬間閃退了Orz

所以雖然真的很好看，我用一用還是換回原本的DirectWrite渲染xD


--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 61.219.36.31
※ 文章網址: https://www.ptt.cc/bbs/Browsers/M.1422890095.A.BD3.html
推 abccbaandy: 借個標題問問，如果網頁有指定字型，替換好像就會失效
→ abccbaandy: 難道要一個個字型加入？
→ mayuyu: t7yang大的樣式已經將中文網頁常見的字型都寫好了
→ mayuyu: 如果網站指定的字型在這些預設的字型之外
→ mayuyu: 而你又想強制替換的話 確實是要手動加入沒錯
→ mayuyu: 例如pocket使用的襯線字體我就覺得不好讀
→ mayuyu: 所以就手動把pocket用的chaparral-pro給換掉
→ mayuyu: 有別種寫法可以強制替換所有字型 可是這種無條件替換法
→ mayuyu: 反而會造成更多的問題 所以還是用t7yang大的樣式比較好
→ mayuyu: 因為要貼圖又打開Mactype 結果剛剛推到一半 Fx又閃退了Orz
推 Wcw5504: FX到36也要支援unicode-range了 以後寫CSS會比較方便
→ Triedge: mayuyu桑請問一下你這字型有分字重嗎，還是單一款式@@?
→ t7yang: 樓樓上說的要是成真的，我就被感動到了（淚
→ t7yang: 那個問題在bugzilla都不知道擺了多久了 囧興
推 t7yang: 這篇文章大概要仔細讀一下，應該會獲得一些新的資訊
→ t7yang: 尤其是Chrome的部分。倒是我比較在意的是 FX 成像上的延遲
→ t7yang: 就是之前我一直反覆提到的，以Gmail作為例子，只要捲動
→ t7yang: 卷軸文字就失去強化成像的效果，要等個1秒左右才會恢復
→ t7yang: 這點也很煩人，不曉得mayuyu大有沒有遭遇這樣的情況
推 abccbaandy: 還是有那種排除特定字型不要換的？會出問題是好像都是
→ abccbaandy: icon font？
推 sziwu1100: 我是用stylish 基本上覺得GC的效果比FF漂亮
→ sziwu1100: http://drp.io/nqS/+  使用GC看yahoo網頁的效果
@Wcw5504 終於要支援了，這樣真的方便很多。

@Triedge 你是說圖中使用的明蘭秀月嗎？有W4和W7兩個字重。
範例圖 http://i.imgur.com/I1K30mQ.png
圖(1920x1080)不能放大縮小要1：1(100%)顯示才不會模糊失真

@t7yang 在之前的Fx版本我也有遇過這個情況，
不過不是在Gmail遇到的而是在K島上，
拉動捲軸後要等一段時間渲染才會加上，
但是這個問題後來就自然消失了，我猜可能是
1.Fx更新修好了這個bug
2.我更新了顯示卡驅動程式到最新（我是用intel內顯）
3.可能我之前用某個css樣式會造成硬體渲染延遲？
4.和某個我後來停用的擴展衝突？
5.我一直開著Mactype不知道有沒有影響？

你用的顯示卡和驅動是哪一張？可以試試看更新驅動到最新，
或者是開一個全新profile，看看在沒有css或擴展的干擾下
還會不會出現這個問題。
還有雖然我目前在一般網頁上沒有遇到渲染延遲的現象，
但是在BBSFox底下還是會看到這個問題，
當游標快速移動的時候會看到字體輕微的抖動。
ettoolong大好像有提過這個bug，這個問題可能問他會比較清楚。

@abccbaandy 可以排除特定字體不要換，但就是因為這樣很麻煩，
同樣要手動一個一個加入例外，而且會越加越多樣式變得超煩。

@sziwu1100 css陰影效果可能差不多，只是Fx的強度一下子
就跳了一級，沒有接近Chrome0.001em的那個強度，
所以不上不下的有點尷尬。
至於DirectWrite硬體加速渲染的效果，由於Fx可調整參數，
所以彈性比較大。
但是Chrome的字都比較銳利一點，不只字，從以前我就覺得
Chrome的圖形也比較銳利，看看Fx用上高品質縮放之後會不會追上，
不過我覺得Chrome那個銳利是額外增強的，原本不應該會那麼銳利。


我昨晚因為時間太晚了沒打完，而且文章太長自己都不想看xD

我後面是要提供我使用的字型和設定，還有Mactype的設定檔。
我後來並沒有用Mactype來渲染Fx，還是用回DirectWrite，
不過因為0.015em會太模糊，所以我把陰影樣式改成
text-shadow: 0 0 0.5px rgba(0,0,0,0.5);

（調0.21px和0.5px二個數值效果都一樣）
我反覆抓圖下來直接切換比較，
在我的系統上這個數值會讓Fx接近Chrome0.001em的清晰程度，
雖然還是Chrome比較銳利一點，但是Fx的線條比較紮實，
Chrome細字的線條還是有點發虛，至於粗細的話兩者就幾乎一樣。

而硬體加速渲染的設定全部都是預設值，
我只有修改了
gfx.font_rendering.cleartype_params.rendering_mode

這一項調整為 5 也就是不管字型大小全部用Natural Symmetric抗鋸齒
這項不調整用預設值的話，部分英文字體小字號會改用GDI Classic抗鋸齒，
看起來會變得很難看。

其他全部都是預設值
gfx.font_rendering.cleartype_params.gamma -1
數值越低字體越粗，但是看起來筆畫會黏成一團

gfx.font_rendering.cleartype_params.enhanced_contrast -1
數值越高字體越黑，但是邊緣越破碎

gfx.font_rendering.cleartype_params.cleartype_level -1
數值越高次像素渲染越強，但是邊緣會溢色

gfx.font_rendering.cleartype_params.pixel_structure -1
一般都是RGB

gfx.use_text_smoothing_setting false
在OS X底下才有用

gfx.font_rendering.cleartype.always_use_for_content false
在Windows XP底下才有用

gfx.font_rendering.directwrite.enabled false
在關閉硬體加速的情況下，仍然可以使用DirectWrite

如果改變了這些硬體設定，同時也要修改上面的陰影樣式數值，
才能讓Fx看起來類似Chrome。


在Windows 7底下用Android虛擬機輸出
http://i.imgur.com/hm2nwya.png

強烈對比之下Windows 7的cleartype真是悲劇xD

所以後來看小說雜誌我都乾脆切到Android來看了。

※ 編輯: mayuyu (61.219.36.56), 02/03/2015 06:59:06
推 sate5232: 有沒有標點符號在中間而非在下面的推薦字體?
→ sate5232: 在底下的一直都不太習慣，所以我現在還在用iLiHei-FA
推 kaoh08: 花在搞這些東西的時間 換成時薪都可以加錢買台macbook了
推 sziwu1100: 樓上 還好吧 只是按按鍵改點設定而已 不花多少時間呀
推 ettoolong: 這篇很有用耶, 可是東西好多, 我要研究一下. 謝謝分享.
推 karst10607: 太複雜啦… 有沒有簡單無痛教學設定
→ Triedge: 了解了，謝謝mayuyu桑 <3
→ Triedge: 無痛教學搜尋ma桑的文章就有嘍，整個很實用!
推 Kreen: 推～～
→ Wcw5504: 思源黑體標點就是在中間了
→ sate5232: 思源體我弄起來連微軟正黑都比她好看...
推 sziwu1100: sate大 微軟正黑體就可以了吧 用stylish效果也不差
→ sziwu1100: http://drp.io/nvN/+  stylish使用微軟正黑體
→ sziwu1100: http://drp.io/nvO/+  pttchrome 使用華康細黑體
推 mstar: 個人喜歡「華康中黑體-UN」，是華康三款 unicode 字型之一
→ mstar: 不過不是免費的
→ mayuyu: 抱歉我這幾天比較忙 懶人包我之後再放上來
→ mayuyu: 標點符號在中間的字型可以自己替換 例如FontCreator
→ mayuyu: 只要改標點符號那幾個字元拿別的在中間的字型
→ mayuyu: 來替換就可以了 像明蘭有一些字的舊字體寫法
→ mayuyu: 看起來可能會不習慣 也是替換掉那幾個字就可以了
→ mayuyu: sziwu1100的stylish渲染蠻好看的 可以分享你的樣式嗎？
→ sate5232: 我用DirectWrite怎麼調都還是沒辦法好看...
→ sate5232: 最後只好繼續MacType..
推 sate5232: text-shadow:多少以下不作用會不會和解析度有關?
→ sate5232: 我在我15.5吋筆電上要0.36以上才會看到差異，可是就太
→ sate5232: 糊了，0.35以下則跟沒加一模一樣
→ mayuyu: @sate5232 我這裡沒辦法讓Mactype來渲染Fx 否則Fx會
→ mayuyu: 當得很厲害 囧興 調整一下alpha值試試看 alpha越低
→ mayuyu: 字體顏色越淡不過霧霧的情況會減輕 看起來會比較清晰
→ mayuyu: 範例圖用的Mactype設定檔下載
→ mayuyu: http://paste2.org/_EZAe7YsX
→ mayuyu: 我試過調整Mactype設定DirectWrite=1或0 看起來都一樣
→ mayuyu: Fx都會當得很厲害 >< 不過不同系統結果可能不一樣
→ mayuyu: 大家自己調整看看
→ mayuyu: 這個Mactype設定檔字很粗 最好不要再加stylish渲染
→ mayuyu: 否則比較複雜的字 密集的筆畫會黏在一起 看起來反而很吃力
→ mayuyu: 雖然字比較粗 不過清晰度還是比Mac差一點
→ mayuyu: Mac系統預設字型很難看 不過換成明蘭後還是很漂亮
→ mayuyu: http://i.imgur.com/qht2P77.png 明蘭雖然有些字體
→ mayuyu: 的舊字形看起來不習慣 但是真的很好讀 看很久也不會累