由于之前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或者衬线字的显示效果。