关于博客的排版和字体

原文来自：https://jellybool.com/post/how-to-setup-right-font-family-on-web

这篇文章其实开始于我之前问的一个问题：

博客有什么好字体推荐么

后来貌似没什么人鸟我，所以我就自己到处看资料，然后把得到的一些信息总结一下：

其实在web字体方面，如果要认认真真做好，貌似可以挺有研究的。在下实在是不敢在这里班门弄斧，所以以下总结仅仅根据本人的经验和查到的资料。

正确的字体声明方式

首先，很多开发者可能会使用类似以下的字体声明方式：

font-family: "微软雅黑";

这对于一般情况下的Windows用户其实是没有什么体验上的不友好的，因为目前为止微软雅黑可能就是Windows上最好看的字体了，虽然我觉得它不怎么样。但是，处于一个对博客阅读体验的追求，我们并不是就这么简简单单一句话就以为解决了字体的问题，且不说我们要考虑到众多用户的不同操作系统，就单单说以上的字体声明方式其实也可以说是一种错误，因为字体有显示名称和字体名称，以上只是声明了字体的显示名称，并没有给字体声明字体名称，如果用户是在使用中文操作系统而切换到系统语言是英文，以上的声明方式其实相当于无效，因为这个时候，系统无法找到正确的字体文件。所以，至少你得这样声明：

font-family: "Microsoft YaHei","微软雅黑";

嗯，对，就是将字体名称和显示名称都写上，而且字体名称(英文名称)在前。

说完单系统的优化之后，我们还需要考虑到不同的用户和操作系统Mac OS，Windows，Linux，如果简简单单的就全部微软雅黑，那么这些页面如果呈现给Mac和Linux用户看的话，简直就是一塌糊涂，所以，我们得找到一种应对不同操作系统的字体声明方式：

font-family: "Lucida Grande", Helvetica, Arial, STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑", sans-serif;

1. Helvetica 是 iOS7 及 OSX 10.10 UI 字体（在部分文字垂直居中的场景有一些小问题，暂时可以先使用 Lucida Grande），如果无所谓，其实Helvetica在Mac上显示效果是最棒的。

2. Arial则可以说是通杀Mac和Windows。

3. 如果上面这些都没有，那就用sans-serif吧。

以上的声明其实可以解决掉大部分的字体问题，如果你还需要进一步优化体验，你可以根据UA的不同来加载不同的字体，这种做法可能是最好的解决方案。如果你不想这么做，你可以参考一下下面这个解决方案：

https://github.com/zenozeng/fonts.css

你可以根据不同的div的阅读体验指定不同的字体。

关于排版

在一般的web端，这里指的是笔记本或者台式机上面的一般排版大小，可以考虑以下几点：

1. line-height可以考虑设置为1.8
2. 标题请使用正规的h1,h2等标签
3. 图片最好做到响应式，并且居中显示