本来一直计划自己一步一步开发出这个网站,奈何因为工作等原因一拖再拖,主要还是太懒吧,时间没充分利用起来,想想域名注册到现在也已经好几年了,期间用静态博客程序生成了网站,托管在 github,感觉不理想,就闲置了。
直到最近,用typecho重新搭建了本博客,顺便把以前发表的一些文章搬运过来,结果发现,数字字体显示好丑啊,高低不平,起起伏伏,非常不利于页面的版式整洁。
虽然最近几年偏后端开发,但是前端知识依然不能落下,果断审查了一下元素,找到了所在的问题。原来typecho的全局字体设置是这样的:
这个字体设置粗看没什么问题,Droid Serif 字体是为了适配安卓,Georgia 和 "Times New Roman" 是 windows 下内置的英文衬线字体,"PingFang SC" 和 "Hiragino Sans GB" 是 Mac 电脑的一种非衬线字体,"WenQuanYi Micro Hei" 是Linux下的一种非衬线字体,"Microsoft Yahei" 是 windows 下中文非衬线字体,最后再写个 serif 表示以上字体都没找到时,使用衬线字体即可。
这种设置字体的方式在多年前很流行吧,也很通用。那到底是什么字体导致页面显示的数字排列不规则呢,看下图:
对,没错,就是这个 Georgia 字体。浏览器在读取 font-family 中的字体给页面做渲染时,是从左到右匹配的。我用的 windows 系统,对于英文和数字,首先会匹配到 Georgia 字体,对于中文,会匹配到我电脑中的 "Microsoft Yahei" 字体。
啥也别说,去验证一下,打开电脑 C:\Windows\Fonts 目录,这里面列出了系统已经安装的字体,找到 Georgia,双击进去,然后打开字体文件看看:
果然是高低不平啊,这种字体的美,我欣赏不来。如果有设计师,麻烦给我讲讲这种字体到底美在哪里 :( 。
当然考虑到适应现代化,我必须得调整一下这里的字体设置,我觉得这种全局字体设置,最好还是用非衬线比较好,至于衬线和非衬线的区别,大概就是非衬线字体适合标题,衬线字体适合正文内容。那么我全局设置非衬线字体,如果正文内容需要的时候,单独给正文内容设置一下衬线字体就好了,这样整个网站看起来会整洁许多。
不过现在主流网站,好像都把正文内容字体设置成了非衬线字体,所以基本上一套非衬线字体走天下吧。最后我把字体设置成了这样:
body {
font-family: Helvetica,Tahoma,Arial,"Microsoft Yahei","PingFang SC","WenQuanYi Micro Hei",sans-serif;
}
解释一下,Helvetica 适配 Mac 里的英文字体,Tahoma 在windows 和 Mac 里都可能存在,Arial 是 windows 最常见的字体,"Microsoft Yahei" 微软雅黑,windows 下从 Vista 就开始内置的中文字体,"PingFang SC" 是 Mac 里的中文字体,"WenQuanYi Micro Hei" 为Linux 下的中文字体,最后做一个 font fallback 到 sans-serif 即可,搞定。
修改前:
修改后:
终于顺眼多了。
--End--
参考链接: