Makito's Notebook
生活觀察筆記
活版印字 · Typography

说在前面

在这之前,有一点我必须承认,那就是 —— 我更新博客的频率实在是太低了。

或许是因为平日比较忙,我很难抽空坐下来静静地写点自己的文章。因专业的原因,我经常有各种报告要写,需要翻译的文章也蛮多。其实,不论是讲故事,还是说说自己最近研究的东西,都是我一直向往的事情。正如新的博客名字一样,今后我会多抽些时间写写文章,在这里记录一下生活。

为什么造一个主题?

用了很多年别人做的主题,但「别人的总归是别人的」,想让主题风格跟着自己的胃口走,就只能自己为自己量身定做。另外,看着一个主题「由抽象的思路慢慢变成可以看到的成品」的这个过程也是一种享受。

来说说设计思路吧

我的手边有一本 Pearson 出版的商学教材,在刚拿到书的时候,我就被它的排版风格给吸引住了。说实话,它的排版谈不上精巧,但会给人一种「简洁明晰」的体验,不需多费力气便可在字里行间找到想要的信息。再辅以不同宽度的下划线标注重点内容,一切都显得那么整洁,也在单色印刷的纸面上创造出了有不同层次的错觉。

我给这个主题起名为「活版印字」,其实与英文的「Typography」并非是严格对应的,单论这一点,「Typewriter」的原理可能更接近「活版印刷」或「活版印字」一些。

到这里又不得不谈一下这个主题的本意 —— 希望阅读者将视觉的焦点完全放于文字之上。动画、矢量图、阴影和圆角等这些东西,恐怕对我们来说已经是很熟悉的元素了。而生活中这种有能吸引视觉焦点至纸上之魔力的物品,也就是印满文字的纸了。

不过讲到这里,肯定有些人会说,屏幕和纸张是不能相提并论的。没错,就冲着屏幕用字体与印刷用字体有着截然不同的设计的这点来说,两者的风格混用,再不谨慎的话,就会产生违和感,甚至辣眼睛。

主题最早使用「思源宋体 Source Han Serif」作为主要字体,对于大标题来说,这个字体的确可以写出活版印刷的味道。不过囿于目前中文 Web font 的解决方案仍不成熟,现有的字体子集化方案也并不能很好的支持所有字体,嵌入子集化后的字体或是使用矢量图也可以作为一种方案,但是考虑到难易度、移动端兼容性和「思源宋体」在桌面浏览器用户中的普及度,还是换成了 Sans-serif 类的字体,也免去了视觉上的一些问题。不过喜欢明朝体/宋体的使用者也可以把「ヒラギノ明朝(HiraMinProN)」放在字体列表的首位,Apple 设备中内置了该字体,包括运行 iOS 系统的移动设备。对于中文使用者,尤其是简体中文使用者来说,会存在未覆盖的字符,因此这个方案只适合小范围使用。如果使用日本语书写博客,全站应用该字体的效果还是不错的。现在我的博客的标题就是用了这一字体作为首选,很幸运,六个文字都在覆盖范围内,使用 Mac 或 iOS 设备的朋友应该可以看到效果。

ヒラギノ明朝 あいうえお
日本語 簡體中文 繁體中文

最初的背景是纯白色的,直到有一天喜欢写ちょう的友人送给我一张她刚买的活页纸,那上面的背景网格让我灵光一现,于是就有了现在的背景纹理。

主题内的前景色、背景色以及字体列表提供了自由定制的接口,也可以引入自行子集化的字体。此外,背景网格的深浅取决于背景色的设定,若背景色为深色,则网格自动使用浅色,若背景色为浅色,则网格自动使用深色。

这个主题最初是以自用为目的设计的,因此追求了极简之风,功能上可能并不会如热门主题一样丰富。

更新日志

2017/10/8
  • 对高度的不响应进行修正
  • 样式微调
2017/9/22
  • 新增设定首页文章摘要长度的选项
  • 准备发布
2017/9/20
  • 样式微调
  • 文字抗锯齿处理
  • 新增对「Disqus」与「LiveRe 来必力」评论系统的支持
  • 移除对「多说」评论系统的支持
2017/9/16
  • 整体设计基本完成

整体特性

  • 响应式设计
  • 移动设备友好
  • 整合多种评论系统

下载和使用

GitHub

安装、更新及配置方法请参考 Readme 文件

授权协议

MIT