Skip to main content
此功能最低要求 1.0.2 版本，如低于此版本，请升级 到最新版本。
[!TIP] 关于自定义样式的更多玩法 请看这里。

​
一览（动图）

​
简易方案

打开 https://sspai.com/post/69972 进入阅读模式后，可在右下角触发器直接输入 CSS 样式 xv3V5n.png

​
入口

选项页 → 高级设定 → 自定义样式 Imgur

​
界面说明

Imgur

​
优先级

简悦跟 CSS 有关的地方共有两处：
  • 阅读模式中的 主题 字体样式 字体大小 版面布局
  • 选项页 → 高级设定 → 自定义样式
优先级的顺序：（高 → 底）
  • 自定义 CSS；（上图 ① 所示）
  • 全局、标题与描述、正文、代码段（上图 ② 所示）
  • 阅读模式中的 主题 字体样式 字体大小 版面布局；
图示：
Imgur

​
简悦 HTML 标签说明

​
Class 说明

  • .simpread-font
    定义阅读模式的字体样式，如：
.simpread-font {
    font: 300 16px/1.8 -apple-system,PingFang SC,Microsoft Yahei,Lantinghei SC,Hiragino Sans GB,Microsoft Sans Serif,WenQuanYi Micro Hei,sans-serif;
    color: #333;
    text-rendering: optimizelegibility;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}
  • simpread-theme-root
    用来描述主题的 背景色 与 字体颜色，如：
.simpread-theme-root {
    background-color: #fff;
    color: #555;
}

​
HTML Tag 说明（普通页面）

  • sr-read
    阅读模式的根节点
  • sr-rd-title
    标题
  • sr-rd-desc
    描述
  • sr-rd-content
    正文
  • sr-rd-footer
    页脚

​
图示（普通页面）

Imgur

​
HTML Tag 说明（论坛类面）

  • sr-rd-mult
    每段内容的根节点
  • sr-rd-mult-avatar
    头像
  • sr-rd-mult-content
    每段内容的正文

​
HTML Tag 说明（分页面）

  • sr-page
    分页的根节点

​
图示（论坛类页面 与 分页）

Imgur

​
如何自定义

一般情况下，只需要在 高级设定 → 自定义样式 → 自定义 CSS 段覆盖除 .simpread-font 以外的上述内容，即可。

​
提交你的样式

https://github.com/Kenshin/simpread/issues/71

​
无法更新阅读模式的：主题、字体样式、字体大小、版面布局

当遇到如图所示时，则发生了无法设定的问题。 Imgur
  • 当 自定义样式 中包含了对应的设置，则无法使用 主题 字体样式 字体大小 版面布局；
  • 如果想要使用 主题 字体样式 字体大小 版面布局 则需要删除相关项；
  • 详细请看 优先级关系
对应项的代码如下： 
    switch( type ) {
        case "layout":
        case "margin":
            return styles.global.marginLeft != "" || styles.css != "";
        case "fontsize":
            return styles.title.fontSize != "" ||
                   styles.desc.fontSize != ""  ||
                   styles.art.fontSize != ""   ||
                   styles.css != "";
        case "fontfamily":
            return styles.global.fontFamily != "" || styles.css != "";
        case "theme":
            return styles.css.search( "simpread-theme-root" ) != -1;
    }