在 PC 上面,Alpha 不喜欢宋体的效果,有一种像素化和锯齿的感觉,所以是想方设法替换掉宋体,但是又不能直接暴力替换掉宋体,虽说不喜欢,但是在某些场合中还是有需要的(Word 中打印),所以还是一些修改默认的字体,在 PC 客户端无非就是修改客户端中的资源文件,但是在网页上面就不能这么做了,因为字体是服务器文件上面定义的,Chrome 上面大概有两种替换的方案。而我自己最近新发现了一种效果比较好的方案。

方法一:强制定义

Chrome 的第一种就是强制定义字体,就是在浏览器的"Custom.css"文件中强制定义字体,代码如下

* {
    font-family:"微软雅黑" !important;
}

这种方法有些全了,替换全部字体都为微软雅黑,这样像使用 font-face 定义的图标就显示不出来,而且会丢失很多优秀的西文字体的显示效果。这种方法可以手动去设置,如果你懒得自己动手也可以安装扩展扩展点这里

方法二:JS 循环替换

这种方法是用 JavaScript 遍历 DOM 修改样式,好处就是只替换宋体为微软雅黑,不会改变其他西文字体,缺点就是占用一个扩展进程,增加额外的开销,最让人忍受不了的是必须等待页面载入成功后才进行修改重绘,所以页面刚打开就还是宋体。扩展地址:扩展点这里

我的方法

我的方法就是用 CSS3 中的 font-face 属性,去重写字体,这个方法是在看到知乎上面 CSS 能实现既优先使用英文字体又对弯引号特别处理吗? 问题的解决方法而突然想到的。其实也是在"Custom.css"文件中写一些预定义样式

@font-face {
    font-family:'宋体';unicode-range:U+2E80-FFFF;src: local('微软雅黑');
}

解释下样式的意思吧,就是定义一种名叫 "宋体" 的 Web 字体,字体的使用范围是 Unicode 的 2E80-FFFF,基本覆盖了 CJK 所有字体,字体使用本地的 "微软雅黑",这样别的网页调用 "宋体"其实就是调用本地的微软雅黑了。在这篇文章的过程中,我又在 Chrome 扩展中心发现了一款和原理相同的插件,插件点这里,这个插件通过给浏览器挂一个插件自己带的样式表,而样式表中就是通过 font-face 替换的字体,只是字体替换比较多,也比较全。但要额外安装一个插件,这对于我这样的有系统洁癖的人是不能忍受的,所以说可以复制他的样式表粘贴到 "Custom.css" 文件尾部,达到同样的效果。

给一份我现在用的字体替换样式

@font-face { font-family: Simsun;unicode-range: U+2E80-FFFF; src: local('微软雅黑')}
@font-face { font-family: Simsun;unicode-range: U+0000-2E7F; src: local('Segoe UI')}
@font-face { font-family: NSimsun;unicode-range: U+2E80-FFFF; src: local('微软雅黑')}
@font-face { font-family: NSimsun;unicode-range: U+0000-2E7F; src: local('Segoe UI')}
@font-face { font-family: Simhei;unicode-range: U+2E80-FFFF; src: local('微软雅黑')}
@font-face { font-family: Simhei;unicode-range: U+0000-2E7F; src: local('Segoe UI')}
@font-face { font-family: '宋体';unicode-range: U+2E80-FFFF; src: local('微软雅黑')}
@font-face { font-family: '宋体';unicode-range: U+0000-2E7F; src: local('Segoe UI')}
@font-face { font-family: '新宋体';unicode-range: U+2E80-FFFF; src: local('微软雅黑')}
@font-face { font-family: '新宋体';unicode-range: U+0000-2E7F; src: local('Segoe UI')}
@font-face { font-family: '黑体';unicode-range: U+2E80-FFFF; src: local('微软雅黑')}
@font-face { font-family: '黑体';unicode-range: U+0000-2E7F; src: local('Segoe UI')}
/* 分别替换,宋体,新宋体,黑体为微软雅黑 */
@font-face { font-family: monospace;unicode-range: U+2E80-FFFF; src: local('YaHei Consolas Hybrid')}
@font-face { font-family: 'monospace';unicode-range: U+2E80-FFFF; src: local('YaHei Consolas Hybrid')}
@font-face { font-family: Consolas;unicode-range: U+2E80-FFFF; src: local('YaHei Consolas Hybrid')}
@font-face { font-family: Lucida Console;unicode-range: U+2E80-FFFF; src: local('YaHei Consolas Hybrid')}
/* 替换常见的等宽字体 */

最后说一句,"Custom.css" 文件一般在下面这个路径中(Win7),WinXP 自己找呗。

C:\Users\[你的用户名]\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets

扩展阅读