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

看板Browsers作者 (卒業おめでとう!)時間7年前 (2018/03/19 16:43), 7年前編輯推噓12(12推 0噓 28→)
留言40則, 8人參與, 7年前最新討論串1/2 (看更多)
由於之前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
→
03/19 16:50, 7年前 , 1F
我放棄mactype了，自訂解析度調整到看起來不會疲勞的1280
03/19 16:50, 1F
→
03/19 16:50, 7年前 , 2F
x 720 肉眼最舒適
03/19 16:50, 2F
圖貼錯了重貼 ※ 編輯: mayuyu (61.219.36.126), 03/19/2018 16:56:23
推
03/19 20:12, 7年前 , 3F
官方新版20170628和糖果版的20170628都算蠻定的了，
03/19 20:12, 3F
→
03/19 20:13, 7年前 , 4F
字體大小就要System Font Size Changer 來修改
03/19 20:13, 4F
→
03/19 20:13, 7年前 , 5F
糖果版的是全面渲染，只是沒法用外部軟體改字體大小
03/19 20:13, 5F
推
03/19 20:17, 7年前 , 6F
Firefox52版以後要再修改，https://tinyurl.com/y9y99zmj
03/19 20:17, 6F
推
03/19 20:26, 7年前 , 7F
MacType根本是亂吹 最近兩台電腦互相測試 發現根本不神
03/19 20:26, 7F
推
03/19 20:28, 7年前 , 8F
包括糖果版 用system font size changer 配合像是CENT
03/19 20:28, 8F
→
03/19 20:29, 7年前 , 9F
之類的瀏覽器根本9成就很好了 剩下再自己微調
03/19 20:29, 9F
→
03/19 20:32, 7年前 , 10F
因為之前實在當得太厲害
03/19 20:32, 10F
→
03/19 20:32, 7年前 , 11F
我擔心RS4出來以後可能還是會發生相容性問題
03/19 20:32, 11F
→
03/19 20:32, 7年前 , 12F
Fx的話我也放棄用MacType渲染
03/19 20:32, 12F
→
03/19 20:32, 7年前 , 13F
因為用Direct2D渲染的速度實在快很多
03/19 20:32, 13F
→
03/19 20:33, 7年前 , 14F
字型去掉Hinting後DW的渲染效果已經很不錯
03/19 20:33, 14F
→
03/19 20:33, 7年前 , 15F
如果字體太細 再用CSS稍微加粗一下應該可以接受
03/19 20:33, 15F
推
03/19 21:25, 7年前 , 16F
我是直接用Noto，圖示變豆腐字再去加圖示用的字體
03/19 21:25, 16F
→
03/19 21:26, 7年前 , 17F
03/19 21:26, 17F
推
03/20 00:27, 7年前 , 18F
去年秋季的Creators Update好像已經處理hinting的問題了?
03/20 00:27, 18F
→
03/20 01:02, 7年前 , 19F
還是沒有 所以我們還是需要手動放大DPI到200%
03/20 01:02, 19F
→
03/20 01:03, 7年前 , 20F
或者修改gasp表
03/20 01:03, 20F
→
03/20 01:03, 7年前 , 21F
WIN10 TH2之後有把hinting的門檻降低到22px
03/20 01:03, 21F
→
03/20 01:03, 7年前 , 22F
雅黑正黑UI字號大到22px以上 系統會停用hinting
03/20 01:03, 22F
→
03/20 01:03, 7年前 , 23F
但是系統預設的字號只有9pt@96DPI=12px
03/20 01:03, 23F
→
03/20 01:03, 7年前 , 24F
所以還是慘不忍睹 要放大200%才會到22px以上
03/20 01:03, 24F
→
03/20 01:04, 7年前 , 25F
所以2K以上的螢幕只要DPI200%就可以不用MacType
03/20 01:04, 25F
啊 我忘了說 替換完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
推
03/20 10:24, 7年前 , 26F
pcman combo 的渲染糊掉了.. 有什麼解法嗎 :S
03/20 10:24, 26F
→
03/20 10:25, 7年前 , 27F
目前 1080p dpi150% 已試過 winfont+64.exe
03/20 10:25, 27F
→
03/20 10:25, 7年前 , 28F
也調過 cleartype 了
03/20 10:25, 28F
推
03/20 10:51, 7年前 , 29F
後來裝 pcman 0.95 版解決
03/20 10:51, 29F
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
→
03/20 14:17, 7年前 , 30F
啊 我現在才注意到上面提供的第二個連結有介紹WinFont
03/20 14:17, 30F
→
03/20 14:17, 7年前 , 31F
那是1703之前為了解決傳統GDI程式的解法 現在已經不需要了
03/20 14:17, 31F
→
03/20 14:18, 7年前 , 32F
連結的文章作者也建議不要在1703以後全局使用WinFont
03/20 14:18, 32F
→
03/20 14:18, 7年前 , 33F
那樣會造成GDI Scaling完全失效 同時可能影響系統穩定性
03/20 14:18, 33F
推
03/20 14:36, 7年前 , 34F
沙盒裡的程式好像沒辦法用「右鍵→相容性」這招
03/20 14:36, 34F
→
03/20 14:36, 7年前 , 35F
請問有解法嗎？
03/20 14:36, 35F
→
03/20 16:00, 7年前 , 36F
在沙盒裡開啟檔案總管 再從檔案總管開啟要執行的GDI程式
03/20 16:00, 36F
啊 還有 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
推
03/20 16:29, 7年前 , 37F
唔喔喔喔 這解法完美了！感謝！
03/20 16:29, 37F
推
03/20 16:50, 7年前 , 38F
居然沒想到，真的是腦筋急轉彎。
03/20 16:50, 38F
→
03/20 16:50, 7年前 , 39F
謝謝解答 XD
03/20 16:50, 39F
推
03/20 17:58, 7年前 , 40F
推系統（增強） 這招很實用
03/20 17:58, 40F
‣ 更多 mayuyu 的文章
文章代碼(AID): #1QhtWMKH (Browsers)
‣ 更多 mayuyu 的文章
文章代碼(AID): #1QhtWMKH (Browsers)