一切皆因简书而起。
简书用户设置里有语言设置这一项,可以自定义选择简体中文、繁体中文、英文三种语言选项,不同的用户选择适合自己或者自己喜欢的显示语言,这挺好。但当我选了「繁体中文」时,字体发生了细微的变化。
(上:红线以上为简体设置后,红线以下为繁体设置后)
换成了繁体中文后的文字显示效果简直渣到不行!我用的是 Windows (8)+Chorme 浏览器,换成其他浏览器(Firefox & IE 10)后依然如此。Mac 上无此问题。猜测是 Windows 对字体的的渲染问题。接着查看代码,繁体中文页面的 lang 属性是 lang="zh-TW"
手动替换成跟简体中文一样的 lang="zh-CN"
后,渣渣的字体显示效果就变得跟简体一样(不怎么渣)了。
原来问题出在这。
难道简书的前端童鞋根据语言(lang)的设定,分别使用了不同的字体?
继续查看代码。不管是中文简体,中文繁体还是英文,字体都为同一段 CSS 代码。
font-family: "Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB",sans-serif;
这我就不明白了。赶紧问谷歌。其中找到这么一句话:
lang 会控制浏览器使用的字体。比如在最新的 Windows 里,如果没有明确写明字体,原则上来说 zh-CN 会默认用上微软雅黑或宋体(SimSun),而 zh-TW 就会用上微軟正黑或新細明體。(原处,本结论是否正确有待验证)
我猜测,当网页未声明字体属性时,(部分)浏览器会针对 lang
属性使用不同的默认字体或渲染方式。比如我把字体属性统一定义成微软雅黑(Microsoft YaHei)时,不论是中文简体还是中文繁体,都会显示为微软雅黑字体。但是有一个问题,页面明明已经声明了 font-family
属性,为什么两种类型语言分别却显示不同的字体呢?仔细看看这段字体属性值,居然都是西文字体,唯一的冬青黑体(Hiragino Sans GB)又只存在于 Mac 系统中。如果去掉这段 CSS 属性,可以看到页面中文字的字体没有发生变化,只是英文字体发生了变化。
至于我的判断对否,还请有经验的前端大湿前来指正。
另外,再查找问题的时候还发现几篇不错的文章,顺手贴下算是知识普及了。