2020-02-27 | UNLOCK

利用Stylus插件讓Chrome有macOS般的字體渲染效果

Stylish是一個讓你可以在每個網站自訂CSS的工具,我們可以利用CSS達成類似Mac的字體渲染效果。

安装所需字体和Stylus插件

思源黑体 直接下载链接(SC)
思源宋体 直接下载链接(ExtraLight + Light + Regular + Medium SC) 直接下载链接(SemiBold + Bold + Heavy)
Stylus

因为Mac原版苹方体据说在低分屏上表现不佳,而且下载麻烦,故采用Adobe版的免费开源字体思源黑体。思源黑体和思源宋体可以选择简繁日韩任何一种下载,汉字部分是一样的,差别在标点符号的优先度,简体版优先显示大陆样式标点符号。以上给出简体版链接。

设置Chrome字体

进入外观→自定义字体(这是Edge Chromium的画面,应该和Google Chrome一样)

Source Han Sans TC就是思源黑体繁体版,如果安装简体版应该会显示思源黑体。等寬字体没设也没关系,不影响。

设置完后你会发现有些网站的字体改变了,但是大部分没变,而且也没有渲染效果。因为大部分网站在CSS里面指定了要用的字体,我们需要用Stylus强制那些网站改用我们的字体并且帮我们渲染。

配置stylus

点Stylus图标,新建三个样式,名字自己取

img2

全局样式

1
2
3
4
5
6
7
8
9
10
11
12
* { -webkit-text-stroke-width:0.16px;}
* { text-shadow: 0.01em 0.01em 0.02em #707070; }
@font-face {font-family: "Arial"; src: local("Source Han Sans SC Regular")}
@font-face {font-family: "Roboto"; src: local("Source Han Sans SC Regular")}
@font-face {font-family: "Helvetica"; src: local("Source Han Sans SC Regular")}
@font-face{font-family: "Microsoft YaHei"; src: local("Source Han Sans SC Regular")}
@font-face {font-family: "微軟正黑體"; src: local("Source Han Sans SC Regular")}
@font-face {font-family: "Microsoft JhengHei"; src: local("Source Han Sans SC Regular")}
@font-face {font-family: "Microsoft JhengHei UI"; src: local("Source Han Sans SC Regular")}
@font-face {font-family: "Times New Roman"; src: local("Source Han Serif SC Regular")}
@font-face {font-family: "Georgia"; src: local("Source Han Serif SC Regular")}
@font-face {font-family: "Times"; src: local("Source Han Serif SC Regular")}

字重:ExtraLight(250)、Light(300)、Normal(350)、Regular(400)、Medium(500)、Bold(700)、Heavy(900)。

数字越大字越粗,如果不喜欢Regular的效果可以自己调整。Mac的字体是偏粗的,但在低分屏上,太粗的字体会糊成一块,可以考虑改细一点。

加粗样式

1
2
3
4
5
6
7
8
9
* { -webkit-text-stroke-width: 0.16px;}
* { text-shadow: 0.01em 0.01em 0.02em #707070; }
@font-face {font-family: "Arial"; src: local("Source Han Sans SC Bold")}
@font-face {font-family: "Roboto"; src: local("Source Han Sans SC Bold")}
@font-face {font-family: "Helvetica"; src: local("Source Han Sans SC Bold")}
@font-face{font-family: "Microsoft YaHei"; src: local("Source Han Sans SC Bold")}
@font-face {font-family: "Times New Roman"; src: local("Source Han Serif SC Bold")}
@font-face {font-family: "Georgia"; src: local("Source Han Serif SC Bold")}
@font-face {font-family: "Times"; src: local("Source Han Serif SC Bold")}

例如搜索页面适合用粗一点的字显示,可以针对个别网站设置更粗的字体。

宋体样式(optional)

1
2
3
* { -webkit-text-stroke-width:0.16px;}
* { text-shadow: 0.01em 0.01em 0.02em #707070; }
* { font-family: "Source Han Serif SC Medium"!important;}

强制知乎使用宋体,看起来更有文艺气息了有木有。

效果图

左:有Stylus 右:没Stylus




評論加載中