博客字体设置

博客字体和大小设置的重要性毋庸多说。当前,正文字体多是宋体或微软雅黑了,这两个字体都是非衬线体,我都不喜欢。当宋体字大于13px就丑陋了,所以我喜欢把字体设置为13px(例如知乎),但是如此一来,字又太小了,好多人表示累眼。

为此,我只好把字体改为黑体,大小为14px,西文则设为Georgia,这个在Panels主题上使用过。后来换主题,发现这种字体也不好看,换成微软雅黑也不满意。

一天,想到了兔二爷博客上楷体字,果断设置了一下。字体楷体,经过不断调整大小为17px,大一号则突兀,小一号则字形不舒展,就这么大了!由于Georgia字体在楷体中太突出,不够和谐,西文则改为了Verdana。

然而,在手机上就会发现,字体设置白搭了。虽欲解决,只是无从下手,直到昨天看到了阮一峰的文章,这才恍然大悟:系统决定了字体的显示。这才有了初识全貌感,原来,苹果Mac系统上显示的也不是我要的样子。为此,更改如下:

font-family: Verdana,Georgia,KaiTi,"楷体",STKaiTi,"华文楷体",
             "Microsoft YaHei", "微软雅黑", serif;

哎,衬线体就是好看!

更多信息请看:中文字体网页开发指南http://www.ruanyifeng.com/blog/2014/07/chinese_fonts.html

20150508更新

经反馈,才发现了一个问题,除了系统的差异,还有浏览器渲染的区别。一直以来,我都是在Chrome浏览器上测试,不想在IE和Firefox上都显示不够完美(即便是所谓有着Chrome相同核心Webkit的360极速浏览器也是如此),字体有种锯齿感,除非把字改为非常大才会显示良好。然而,除了把楷体换掉,否则我也毫无办法。

65 replies on “博客字体设置”

  1. 潘俊文说道:

    其实我觉得楷体和宋体真的很难看啦。不过Windows下实在找不到人人电脑都有的还漂亮的字体

    • 方室网志说道:

      黑体有些呆板僵硬,但字间距比较好,雅黑给我的感觉就像相互交错,看着乱!宋体比较醒目,但是给人太简陋的感觉了,虽然都是衬线体,但是楷体的感觉不错。
      有没有可能调整字间距?

  2. 皇家元林说道:

    其实雅黑字体就挺好,方方正正的。。

    • 方室网志说道:

      终究是个人喜好吧,一直以来没觉得微软雅黑好看。看了你的博客,有种未完成品的感觉,略有点乱,呵呵,个人观感,别介意。

  3. 瑾瑜说道:

    楷体还是比较适合做标题,现在手机预置的字体一般都是非衬线的。而且在电脑上,受限于分辨率,衬线未必好看。

    • 方室网志说道:

      我在Win7+Chrome上浏览博客还是挺好看的,Mac系统应该也不会差,手机系统直接换字体了,问题不大。其他的如ie、firefox等浏览器就不太理想了。
      PS:为嘛你的昵称要伪装呢?

  4. 土木坛子说道:

    也是折腾不止。我直接用主题默认设置,无论如何设计,都有人满意,有人不满意。

    • 方室网志说道:

      偶尔折腾一下,如果总有不满意的,那至少要保证自己满意,哈哈!

  5. 大肥羊说道:

    17号感觉和我那16号差不多。

  6. 龙城瓶子说道:

    不好看。。。

    • 方室网志说道:

      让你也觉得好看?不强求。因为人在不同的时候喜欢的色彩不同,不奇怪,否则折腾主题干嘛。

  7. cly说道:

    看上你的主题了,求分享。

    • 方室网志说道:

      你想要吗?你真的想要吗?那么先把twentyfifteen先装上,然后我把twentyfifteenchild打包发给你。

  8. 随望淡思说道:

    实话说,这个字体在WIN7上看,虽然边缘圆润了,但也是不够清晰!

    • 方室网志说道:

      色彩不是纯黑,所以看起来比较温和,类似雅黑那种感觉,没那么锐利。不过,我看着还可以啊!

  9. wys.me说道:

    现在这字体一般大小,不伤眼。咋又不用大红主色调了,换天空蓝了,不错。感觉宁静。

    • 方室网志说道:

      夏天到了,大红看着太热。不过,原来的是紫色好不?喜欢就最好了。

  10. giant888说道:

    楷体一上屏幕总感觉有点怪怪的。

  11. an9说道:

    读者舒服才最重好。

    • 方室网志说道:

      读者可不是一个人,众口难调,首先还是要自己喜欢的。

  12. 天长地久说道:

    完美主义者
    我是随心所欲那种

  13. 这个主题和字体感觉我很喜欢!

  14. 诗简苒说道:

    其实我对字体不敏感,哈哈…

    • 方室网志说道:

      哈哈,这就是个人口味了,就像我不会用这么长的域名,以及带下划线的ID的网易的邮箱!
      或者你还没到这个敏感的时候。

      • 诗简苒说道:

        我所有的邮箱,十个得有八个都是这个带下划线的ID…
        哈哈…

        • 方室网志说道:

          严重怀疑你的审美情趣!
          我只要纯字母和纯数字的,而且字母和数字组合都不是那么随便的,哈哈

          • 诗简苒说道:

            我记得小时候阅读一个电脑杂志叫《CHIP新电脑》
            然后那里面的编辑、评测师的邮箱都是姓+下划线+名的样式。
            然后我就效仿了,哈哈……

  15. 大致说道:

    “楷体”那几个汉字可以不写的。
    看到楷体总有种看红头文件的感觉。

  16. 路易大叔说道:

    这个字体看起来很费劲

  17. 河石子说道:

    感谢分享,很实用的。

  18. 叶子说道:

    手机上的字体有限,基本都一样。这个配色,依然舒适。

  19. 勺子说道:

    重视读者体验是一件值得点赞的事情!

  20. 浮茗诗舍说道:

    配色再调一下感觉会更好,现在感觉有点照眼。

Comments are closed.