关于网站的排版和字体

JellyBool

JellyBool

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

博客有什么好字体推荐么

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

其实在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. 图片最好做到响应式,并且居中显示

本文由 JellyBool 创作, 转载和引用遵循 署名-非商业性使用 2.5 中国大陆 进行许可。

共有 0 条评论