中文网页中的字体选型及开发指南

引子

趁着暑假，我又搭建了一个自己的个人博客，不同于以往，这次用的是较新的博客系统 Ghost。

因为 Ghost 的主题和 UI 实在是太好看了。

而且易用性也很好，比起臃肿的 WordPress 和 折腾人的 Hexo ，Ghost 正中我意。

不过作为一个年轻的、国外开发者主导的博客系统，它似乎还没有考虑到中文显示这种东西。

Windows 平台下，Ghost 的中文默认显示为宋体，实在是辣眼睛。

于是就有了这次的探索，中文网页设计中，特别是文字较多的博客类，用那种字体更为合适呢？

例子

先来看看大公司网站所用的字体：

知乎

body {
   
    font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
    font-size: 15px;
    color: #121212;
}

简书

body {
   
    line-height: 1.42857;
    color: #404040;
    background-color: #fff;
    font-family: -apple-system,BlinkMacSystemFont,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-feature-settings: "tnum";
    font-variant: tabular-nums;
}

GitHub

body {
   
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
    font-size: 14px;
    line-height: 1.5;
}

code {
   
    margin-top: 0;
    margin-bottom: 0;
    font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
    font-size: 12px;
}

苹果

body {
   
    font-size: 17px;
    line-height: 1.5294717647;
    font-weight: 400;
    letter-spacing: -0.021em;
    font-family: