GitBook 网页版中文字型优化

Gitbook 用于写大型文档尤其是有层次关系的书籍类电子书还是挺合适的，但其默认的 CSS ~~对中文并不太友好~~首先匹配英文字体族，fallback 至sans-serif 字体族，这在中英文和简繁并用时会有一些小小的问题。好在 Gitbook 提供了自定义 website/ebook 等 CSS 的方法 ==> How can I include custom CSS? · GitBook

这里我们主要关注网页版的阅读体验，所以在 styles 目录下新建 website.css 即可，默认的主题 GitbookIO/theme-default 关于 font-family 的设置为

font-family: @font-family-base;
@font-family-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-base: @font-family-sans;

为了能在 website.css 中覆盖默认样式，我们需要使用更高的权重，这里我使用了 .book 和 .book-summary .book-body 三个类提升权重。具体可参考:

以简体中文的样式为例，使用了简体字型在前，繁体在后的方式适配。

.book .book-summary, .book .book-body  {
    font-family: "Microsoft YaHei UI", "Microsoft Yahei", "PingFang SC", "Lantinghei SC", "Hiragino Sans GB", "WenQuanYi Micro Hei", "WenQuanYi Zen Hei", "Noto Sans CJK SC", "Microsoft JhengHei UI", "Microsoft JhengHei", "PingFang TC", "Lantinghei TC", "Noto Sans CJK TC", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

文章目录