PTT
Submit
Submit
選擇語言
正體中文
简体中文
PTT
Browsers
[字型] WIN10的瀏覽器字體渲染
作者:
mayuyu
((・ω・)ノ)
2018-03-19 16:42:54
由於之前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或者襯線字的顯示效果。
作者:
labbat
(labbat)
2018-03-19 16:50:00
我放棄mactype了,自訂解析度調整到看起來不會疲勞的1280x 720 肉眼最舒適
作者: aiwheat (尋找自己的阿尼瑪)
2018-03-19 20:12:00
官方新版20170628和糖果版的20170628都算蠻定的了,字體大小就要System Font Size Changer 來修改糖果版的是全面渲染,只是沒法用外部軟體改字體大小Firefox52版以後要再修改,
https://tinyurl.com/y9y99zmj
作者:
Shauter
( )
2018-03-19 20:26:00
MacType根本是亂吹 最近兩台電腦互相測試 發現根本不神包括糖果版 用system font size changer 配合像是CENT之類的瀏覽器根本9成就很好了 剩下再自己微調
作者:
mayuyu
((・ω・)ノ)
2018-03-19 20:32:00
因為之前實在當得太厲害我擔心RS4出來以後可能還是會發生相容性問題Fx的話我也放棄用MacType渲染因為用Direct2D渲染的速度實在快很多字型去掉Hinting後DW的渲染效果已經很不錯如果字體太細 再用CSS稍微加粗一下應該可以接受
作者:
abc0922001
(中士abc)
2018-03-19 21:25:00
我是直接用Noto,圖示變豆腐字再去加圖示用的字體像這樣
https://goo.gl/q94A9R
作者:
hohiyan
(海洋)
2018-03-20 00:27:00
去年秋季的Creators Update好像已經處理hinting的問題了?
作者:
mayuyu
((・ω・)ノ)
2018-03-20 01:02:00
還是沒有 所以我們還是需要手動放大DPI到200%或者修改gasp表WIN10 TH2之後有把hinting的門檻降低到22px雅黑正黑UI字號大到22px以上 系統會停用hinting但是系統預設的字號只有
[email protected]
=12px所以還是慘不忍睹 要放大200%才會到22px以上所以2K以上的螢幕只要DPI200%就可以不用MacType
作者:
aeolus0829
(阿洽)
2018-03-20 10:24:00
pcman combo 的渲染糊掉了.. 有什麼解法嗎 :S目前 1080p dpi150% 已試過 winfont+64.exe也調過 cleartype 了後來裝 pcman 0.95 版解決
作者:
mayuyu
((・ω・)ノ)
2018-03-20 14:17:00
啊 我現在才注意到上面提供的第二個連結有介紹WinFont那是1703之前為了解決傳統GDI程式的解法 現在已經不需要了連結的文章作者也建議不要在1703以後全局使用WinFont那樣會造成GDI Scaling完全失效 同時可能影響系統穩定性
作者:
Fizban
(Fizban)
2018-03-20 14:36:00
沙盒裡的程式好像沒辦法用「右鍵→相容性」這招請問有解法嗎?
作者:
mayuyu
((・ω・)ノ)
2018-03-20 16:00:00
在沙盒裡開啟檔案總管 再從檔案總管開啟要執行的GDI程式
作者:
aeolus0829
(阿洽)
2018-03-20 16:29:00
唔喔喔喔 這解法完美了!感謝!
作者:
Fizban
(Fizban)
2018-03-20 16:50:00
居然沒想到,真的是腦筋急轉彎。謝謝解答 XD
作者:
Shauter
( )
2018-03-20 17:58:00
推系統(增強) 這招很實用
繼續閱讀
[-GC-] 請問同時下載數可以變多嗎
ABOUT
[-VV-] HTML5影片當掉變綠幕
AppleID
Re: [-Fx-] Firefox 59.0.1 發佈,這是哪招?
F16V
[-GC-] 巴哈姆特上不去 2000P
downloadboy
[-GC-] 取消內建pdf viewer
killermanJ
Re: [-Fx-] Firefox 59.0 Released
bajiqa
[-GC-] 新增分頁畫面的下半身不見了
sheisonmybed
[-Fx-] Firefox 59.0 Released
rick
[-Fx-] win7不能顯示韓文?
vernc
[腳本] 復原舊版 Youtube 介面
unknown
Links
booklink
Contact Us: admin [ a t ] ucptt.com