让WP字体在各平台有较好的显示效果

以前,一个主题用久了就会因为审美疲劳而换掉,看着新换上的主题闪闪发光,觉得自己做了一个英明的决定。换主题的想法前几天又冒出来了,这次与审美疲劳无关,紧紧是因为原来的主题在Mac的字体实在是不堪入目。几经折腾,终于买了一款还不错的主题。对比过这两款主题,就美观实用来看,还是O-Connor好,但是新买的主题无论在Win下还是Mac下,字体现实都很平滑细腻。昨天突然惊醒:我换个字体不就好了,为什么要换主题呢?

科学上我把我上面的思维模式高度概括为一根筋。博友们的共同观点是,经常折腾主题是新手所为,是不成熟的表现。虽然我不是高手,但是为了装成熟,我决定修改字体属性后继续使用O-Connor。

修改内容:把原有css里body内容

body{font:14px/1.5 arial,SimSun,serif;font-size:0.875rem;background:url(img/bg.png) repeat #666}

改为以下内容:

body{font-family: "Classic Grotesque W01","Hiragino Sans GB","STHeiti","Microsoft YaHei","WenQuanYi Micro Hei",Arial,SimSun,sans-serif;font-size: 14px;font-size: 0.875rem;overflow-x: hidden;background:url(img/bg.png) repeat #666}


对比发现,修改后的代码重新声明了字体的属性,具体如下:

1.对于英文字符,首先查找Helvetica(Mac),然后查找Tahoma(Win),都找不到就用Arial(Mac&Win);若是以上三者都缺失,则使用当前默认的sans-serif字体(操作系统或浏览器指定);

2.对于中文字体,首先查找华文细黑(Mac),然后查找微软雅黑(Win),然后是宋体(Win),黑体(Mac&Win,用作Mac的fallback);同理,若是以上三者都缺失,则使用当前默认的sans-serif字体。

这样声明考虑到了字体的显示名称和字体文件的名称的关系,也考虑到了英文字体,并且英文字体应该在中文字体之前的重要性,当然,肯定也照顾到了不同的操作系统。

Windows, Mac OS, Linux 家族等常用操作系统里的系统字体字体渲染效果差异很大。如果没有缺失字体,正常情况下这样声明 Windows 使用Tahoma+微软雅黑,Mac OS 使用Helvetica+华文细黑。而Linux,因为文泉驿微米黑的质量也没有绝对优势,加之 Linux 各发行版的情况非常复杂,所以或许不指定字体最好。

更新:还是下面的字体设置比较好,亲测。具体演示可以在不同平台打开本站。当然,萝卜青菜,各有所爱。

font-family: Helvetica, Tahoma, Arial, Hiragino Sans GB, "冬青黑体", SimSun, "宋体", Heiti, "黑体", sans-serif;


2 条评论

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注