[字型] WIN10的瀏覽器字體渲染

[mayuyu (卒業おめでとう!)]

由於之前WIN10每次改版都會造成MacType頻繁當機，
所以我已經放棄在WIN10使用MacType。

如果你的WIN10版本是1703以上，並且使用解析度2K以上的螢幕，
只要將系統的DPI放大為200%以上，
系統原生的渲染就已經有非常好的效果，不需要再使用MacType。

如果螢幕只有1080，將DPI放大150%，詳細閱讀並使用下面的方法
https://th0.me/1919.html
https://zhuanlan.zhihu.com/p/26046562

修改系統字型的gasp表來停用字體的Hinting。
準備一支WIN10版本的WinPE，重開機進入WinPE，
將修改好的字型覆蓋到系統的字型目錄，
替換原本的字型，就可以取得很好的渲染效果。

PS：注意一定要WIN10版本的WinPE，否則會沒有權限無法覆蓋系統目錄。
PS: 不能用右鍵安裝字型的方式覆蓋，使用中的系統字型無法用這個方法替換。
PS: 也不能重開機到命令提示字元更換，雖然會顯示覆蓋OK但其實並沒有成功。
PS: 替換後建議到系統字型目錄下檢查字型的檔案日期確定是否有替換成功。


Chrome和Firefox的字體渲染效果並不相同，
可能是為了取得所有裝置的輸出一致，
Chrome很大幅度的修改了DirectWrite的顯示效果
Chrome
https://i.imgur.com/GnxeR2X.png
Firefox
https://i.imgur.com/CTmNGLj.png

上圖Chrome無內插補點放大500%（圖片放大，非字體放大）
https://i.imgur.com/WmGML8K.png
Firefox放大500% 次像素渲染 放大後會看到邊緣的彩色
https://i.imgur.com/LL1Px9S.png

在1080/DPI200%以下的螢幕上，
一般會覺得Firefox的字體渲染效果比較好，
加上預設的Gamma不同，Chrome的字體黑色會比較淡，
所以Cent有修改Gamma，讓黑色深一點接近Firefox的表現，
但是整體來說還是Firefox的渲染比較漂亮。


如果還是覺得WIN10渲染的字體太細，
可以用字型原生的Medium取代Regular顯示，
例如思源黑體有提供原生的Medium字重，就會比較粗一點。
如果字型沒有原生的Medium字重，可以用CSS加粗字體。
CSS加粗字體可以用-webkit-text-stroke或text-shadow
原本
https://i.imgur.com/JXeTqKE.png
-webkit-text-stroke: 0.0150em;
https://i.imgur.com/3LtKlsY.png
text-shadow: 0 0 0.0150em;
https://i.imgur.com/bMo4t9c.png

上圖縮小瀏覽會看不出差異，建議1:1開圖比對。
text-shadow會產生字體模糊的副作用，
-webkit-text-stroke則會比較銳利，
但是有二個缺點，一個是反白後反白的效果看不清楚，
另一個是因為系統會對小號的字體作gridfitting的關係，
造成-webkit-text-stroke描邊加粗沒有描到正確的位置上，
字體的外邊會多出一條細線，看起來變成二重分離的邊線。
https://i.imgur.com/3CM0IPB.png

第二個問題可以用上面修改gasp表的方法來解決，
停用字體的Hinting後就不會發生二層邊線的現象，
但是有些網頁使用的WebFont用這方法就改不到了，
不過大部分的顯示都沒有問題，而且效果銳利很多，
所以我還是盡量用-webkit-text-stroke。
https://i.imgur.com/PCyCqeX.png


要將網頁的字型換成自己指定的字型，
例如將Regular全部換成思源黑體Medium，
我是用這個樣式
https://userstyles.org/styles/111687/killserif-style
這個樣式的好處是只替換指定的字型，而不會全部替換，
避免圖示字型、WebFont也被強制替換，避免一些網頁顯示錯誤。

不過Chrome在某一次改版後，
@font-face變成只能使用Preferred Family的名稱來指定字型，
例如要替換為思源黑體不能寫
src: local("Source Han Sans TC Regular");
否則Chrome會找不到字型，必須寫成
src: local("Source Han Sans TC");
Chrome才能載入思源黑體。

但是詭異的是，Chrome使用Preferred Family，
卻又無法連結同家族的不同的字重，即使指定font-weight: 700;
也無法讀取到同一字型的粗體，只能用常規體加粗來顯示。

例如下圖Yahoo新聞標題的粗體，
將原本網頁指定的正黑體用@font-face替換為H明蘭，
結果無法讀取到粗體，變成用常規體加粗渲染，
可以注意到「壞」這個字，因為直接加粗的緣故，筆畫黏在一起難以辨識
https://i.imgur.com/mDLgE8X.png

正常調用到粗體應該顯示成這樣
可以看到「壞」這個字有合理的筆畫空間分配，不會黏在一起
https://i.imgur.com/IN0MEJN.png



解決的方法一
改用這樣的寫法
*:not([class*="icon"]):not(i) {
        font-family: sans-serif !important;
}

將所有的字型替換成指定的無襯線字型。
缺點是部分圖示或者WebFont會顯示不正確，
需要手動添加到排除名單。
另外有些網站會交叉使用襯線或無襯線字體來做出區別的效果，
例如wiki的條目標題會採用襯線體來顯示，
全都替換為無襯線字體的話，這個編排的視覺效果就消失了。


解決的方法二
第二個方法是仍然使用@font-face來替換，
但是指定一個空的字型，或者只有圖示的字型來換掉原本的字型，
這樣Chrome在這個空的字型中找不到對應的中日韓字符，
最後就會回退至瀏覽器設定的字型中來尋找，
我們只要在瀏覽器的設定中指定好想要顯示的字型即可。

例如
/* KillSerif FallBack Style */
        @font-face {
                font-family: "新細明體";
                src: local("HoloLens MDL2 Assets");
        }

HoloLens MDL2 Assets是WIN10內建的UMP圖示，
只有圖示的字符，沒有中日韓字型，
所以最後會回退至瀏覽器設定的字型中尋找，
我們只要在Chrome的字型設定中設定好思源黑體，
新細明體就會被空的字型掉包，最後回退至思源黑體來顯示。

注意寫成這樣會沒有作用
/* KillSerif FallBack Style */
        @font-face {
                font-family: "新細明體";
                src: local("sans-serif");
        }

寫成這樣也不行
                src: local("NullFont");

一定要指定一個本地實際存在，
但又沒有中日韓或者任何字符的字型才能回退成功。

回退至瀏覽器預設的字型就可以正確調用粗體，
也不怕會破壞圖示或者WebFont或者襯線字的顯示效果。


--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 61.219.36.56
※ 文章網址: https://www.ptt.cc/bbs/Browsers/M.1521448982.A.511.html
→ labbat: 我放棄mactype了，自訂解析度調整到看起來不會疲勞的1280
→ labbat: x 720 肉眼最舒適
圖貼錯了重貼
※ 編輯: mayuyu (61.219.36.126), 03/19/2018 16:56:23
推 aiwheat: 官方新版20170628和糖果版的20170628都算蠻定的了，
→ aiwheat: 字體大小就要System Font Size Changer 來修改
→ aiwheat: 糖果版的是全面渲染，只是沒法用外部軟體改字體大小
推 aiwheat: Firefox52版以後要再修改，https://tinyurl.com/y9y99zmj
推 Shauter: MacType根本是亂吹 最近兩台電腦互相測試 發現根本不神
推 Shauter: 包括糖果版  用system font size changer 配合像是CENT
→ Shauter: 之類的瀏覽器根本9成就很好了 剩下再自己微調
→ mayuyu: 因為之前實在當得太厲害
→ mayuyu: 我擔心RS4出來以後可能還是會發生相容性問題
→ mayuyu: Fx的話我也放棄用MacType渲染
→ mayuyu: 因為用Direct2D渲染的速度實在快很多
→ mayuyu: 字型去掉Hinting後DW的渲染效果已經很不錯
→ mayuyu: 如果字體太細 再用CSS稍微加粗一下應該可以接受
推 abc0922001: 我是直接用Noto，圖示變豆腐字再去加圖示用的字體
→ abc0922001: 像這樣 https://goo.gl/q94A9R
推 hohiyan: 去年秋季的Creators Update好像已經處理hinting的問題了?
→ mayuyu: 還是沒有 所以我們還是需要手動放大DPI到200%
→ mayuyu: 或者修改gasp表
→ mayuyu: WIN10 TH2之後有把hinting的門檻降低到22px
→ mayuyu: 雅黑正黑UI字號大到22px以上 系統會停用hinting
→ mayuyu: 但是系統預設的字號只有9pt@96DPI=12px
→ mayuyu: 所以還是慘不忍睹 要放大200%才會到22px以上
→ mayuyu: 所以2K以上的螢幕只要DPI200%就可以不用MacType
啊 我忘了說 替換完gasp字型後 要記得打開和調整cleartype
WIN10預設已經是開啟的 不過可以調整一下如果你覺得太細太淡
在左下的搜尋輸入cleartype就可以找到系統的cleartype調整工具
調整的設定會寫入到registry 位置在
HKEY_CURRENT_USER\Software\Microsoft\Avalon.Graphics\DISPLAY1
HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Avalon.Graphics\DISPLAY1
調整的每一個步驟對應的機碼分別是
第一個步驟 PixelStructure 選擇螢幕的像素排列順序是RGB(1)還是BGR(2)
第二個步驟 GammaLevel 1000/1200/1400/1600/1800/2000
第三個步驟 ClearTypeLevel 0/50/100
第四個步驟 EnhancedContrastLevel 0/50/100/200/300/400
           TextContrastLevel 0(選1-2)/1(選3-5)/2(選6)
第五個步驟 GrayscaleEnhancedContrastLevel 0/50/100/200/300/400
也可以用regedit直接改機碼再重開機
※ 編輯: mayuyu (61.219.36.101), 03/20/2018 01:30:33
推 aeolus0829: pcman combo 的渲染糊掉了.. 有什麼解法嗎 :S
→ aeolus0829: 目前 1080p dpi150% 已試過 winfont+64.exe
→ aeolus0829: 也調過 cleartype 了
推 aeolus0829: 後來裝 pcman 0.95 版解決
DPI放大後很多傳統非DpiAware的GDI程式顯示會變得模糊
要在執行檔上右鍵->內容->相容性->覆蓋DPI縮放行為 執行者->
1. 應用程式
交給程式本身去處理DPI縮放 也就是不縮放
介面會維持100%原樣 顯示就不會模糊
也就是原本你在96DPI下不縮放看到的模樣

2. 系統
交給系統放大 也就是預設行為 介面放大 但模糊

3. 系統（增強）
1703後才有的新模式 GDI Scaling
概念和MacType Patch作者的WinFont一樣
將GDI輸出的API轉換成DirectWrite處理
非100%DPI時會同時忽略hinting
讓傳統GDI程式搖身一變變成DW渲染的程式
介面放大 但不會模糊

傳統GDI程式可以先試試3. 系統（增強）
如果效果不理想 選1. 應用程式 就可以回到96DPI不縮放的模樣

GDI Scaling是神器 所以在1703以後 已經不太需要Mactypec和WinFont了
※ 編輯: mayuyu (61.219.36.71), 03/20/2018 13:42:20
→ mayuyu: 啊 我現在才注意到上面提供的第二個連結有介紹WinFont
→ mayuyu: 那是1703之前為了解決傳統GDI程式的解法 現在已經不需要了
→ mayuyu: 連結的文章作者也建議不要在1703以後全局使用WinFont
→ mayuyu: 那樣會造成GDI Scaling完全失效 同時可能影響系統穩定性
推 Fizban: 沙盒裡的程式好像沒辦法用「右鍵→相容性」這招
→ Fizban: 請問有解法嗎？
→ mayuyu: 在沙盒裡開啟檔案總管 再從檔案總管開啟要執行的GDI程式
啊 還有 DPI放大125%～175%後 瀏覽器的介面看起來可能會過大
Firefox可以自訂介面大小 在網址列輸入 about:config
搜尋 layout.css.devPixelsPerPx
修改為1.0就是100% 如果太小可以改為 1.25/1.35/1.5
Chrome在啟動捷徑加上
chrome.exe --high-dpi-support=1 --force-device-scale-factor=1.35
※ 編輯: mayuyu (61.219.36.86), 03/20/2018 16:26:47
推 aeolus0829: 唔喔喔喔 這解法完美了！感謝！
推 Fizban: 居然沒想到，真的是腦筋急轉彎。
→ Fizban: 謝謝解答 XD
推 Shauter: 推系統（增強） 這招很實用