WordPress引入typo.css进行中文版面重排

在上一篇文章中,我讲到了如何插入一段代码来更改WordPress字体,以便做到更为良好的阅读体验。

然而在后续的研究中,发现在互联网上还存在各路大神已经编辑好的CSS文件,提供系统化的排版方案。更为重要的是这些CSS文件是专为中文排版阅读所构建。

关于typo.css

typo.css是一个由sofish(小鱼)开发的CSS文件。专注于中文在屏幕上的排版模式。

源代码托管在在Github:Github/sofish/typo.css

排版Demo呈现在:Typo.css

源文件下载地址:typo.css

根据开发者sofish的表示,代码基于 MIT License 许可公开,因此想要使用请申明来源,其余爱咋咋。

截至目前,WoadZS已经是全站基于 typo.css 进行页面呈现,再次感谢sofish的开发工作。

怎么使用

炒鸡简单,复制,粘贴到主题的 Custom CSS 里面就行了,如果没有,请在 AppearanceEditor 里面找到主题默认的style.css进行插入。

自定义

我对原生typo.css进行了一些修改,以便适应自己的网站。

sofish很贴心的是对CSS文件中每一段都做了详尽的注释,只要对CSS略有了解,就可以很轻松地进行修改。

比如你可以做如下修改:

/* 保证块/段落之间的空白隔行 */
.typo p, .typo pre, .typo ul, .typo ol, .typo dl, .typo form, .typo hr, .typo table,
.typo-p, .typo-pre, .typo-ul, .typo-ol, .typo-dl, .typo-form, .typo-hr, .typo-table, blockquote {
  margin-bottom: 1.2em
}

h1, h2, h3, h4, h5, h6 {
  font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
  font-weight: 100;
  color: #000;
  line-height: 1.35;
}

可以通过增减h1, h2, h3, h4, h5, h6或者加入其他诸如p, code, 等来调整应用规则的标签;也可以调节font-family来更改标签所用到的字体

能做的事情很多,具体可以参阅Github上的官方文档。

嗯,题图据简单做好中文排版,也是一篇讲解中文排版的好文。