先放幾張字體渲染效果
圖(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做文字削邊的修正
[Experimental@Firefox.exe]
ClipBoxFix=1
加了這個參數以後,網址列和標籤頁削頭的現象就修正了,
但是我發現在某些網頁上,會變成文字的底端有輕微的削邊現象。
4. BBSFox裡移動游標的時候頁面更新會產生字體劇烈抖動的現象。
同時版面顯示,左右會稍微的擴大。
尤其是在BBSFox底下,OMTC + skia/cairo + Mactype更容易發生閃退的現象,
有時候剛開啟Fx,打開BBSFox滑沒幾下,Fx就瞬間閃退了Orz
所以雖然真的很好看,我用一用還是換回原本的DirectWrite渲染xD