[字型] 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
推系统(增强) 这招很实用

Links booklink

Contact Us: admin [ a t ] ucptt.com