TL;DR
最近翻回前面的文章,觉得很多问题,不是空行太多影响阅读就是文字太大在手机看觉得很怪;也有一些是使用字体的问题,在苹果手机上没有相关的字体,导致显示出来的效果很不好看,所以想统一一下格式,以免以后排版混乱。
字体
优先使用 Microsoft YaHei 字体,苹果设备优先使用系统字体 -apple-system。Helvetica,Roboto,Noto,Arial,sans-serif 作为备用字体。
排版格式
- 一篇文章文字的颜色不宜太多,尽量少于 3 种颜色
- 文章与左右边框的距离使用 20px ;如果完全贴合左右边框会给人带来压迫感。
- 正文行间距设置为 33px。
- 文章每一段的开头不使用首行缩进,因为采用首行缩进的话在屏幕比较长的手机会使段落看起来不整齐,显得没有必要。
- h1 标题文字大小使用 2.2em;h2 文字大小使用 1.5em ;h3 文字大小使用 1.3em ;h4 文字大小使用 1.15em ;h5 文字大小使用 1em ;h6 文字大小使用 0.9em 。
- 正文的文字大小使用 15px 。浅色模式下文字的颜色为 rgba(0,0,0,0.7),深色模式下文字的颜色为 #d9d9d9。
文字格式
- 链接与非链接的文字之间需要添加一个空格
- 文字表达应清楚无歧义、文字用法应正确,无错别字、单词拼写应正确。
- 中文与英文、中文与数字之间应加一个空格,这样看起来会舒服很多。
- 一些专有的英语单词大小写应该正常使用,例如 Font Awesome ,不应写成 Fontawesome 等。
图片
- 为了提升网页的浏览体验,需要对每一张引用的图片进行压缩,除了需要保证清晰度的图片以外,图片应压缩至小于 200Kb 。
其他
- 所有文章采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。