search

23784148 / posts

Personal blog posts
1 stars 0 forks source link

利用 Google Fonts 为阅读模式添加任何字体 #21

Open 23784148 opened 4 years ago

23784148 commented 4 years ago

如果你是个字体控，希望通过简悦生成的阅读模式支持你喜欢的字体，可以看看这个技巧。

选购字体

登录 https://fonts.google.com/ 后点击 Return to classic site 我个人觉得旧版更适合（当然，你也可以使用当前新版 😀

获取字体后，复制对应的 @import font-family 内容（可选择多个字体，中英文皆可），如下图：

JBLaLQ.png

JBLUsg.png

添加

简悦 → 选项页 → 高级设定 → 自定义样式 → （打开后，滚动条拉到最下放）→ 自定义 CSS 加入上面红框中的内容，并 点击保存 如下：

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+SC|Noto+Serif+TC&display=swap');

sr-read {
    font-family: 'Noto Sans SC', 'Noto Serif TC', sans-serif!important;
}

注意：后面必须要加上 !important，另外具体的规则请看 font-family 的规则，就不再这里复述。

下图是应用了 思源宋体 后的效果

JBvmtA.png

引申

基于上面的 “原理”，我们可以实现多种类型的样式效果，下面给出几个我比较喜欢的阅读样式

模仿 Medium 效果

sr-rd-title {
    font-family: "Adobe Garamond Pro", Georgia, "Times New Roman", Times, serif, -apple-system, system-ui, "Segoe UI", "Droid Sans", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei", sans-serif, sans-serif;

}

sr-rd-content *, sr-rd-content p, sr-rd-content div {
    color: rgb(85, 85, 85);
    font-size: 1.9rem;
    line-height: 1.8;
    font-weight: 400;
    font-family: "Adobe Garamond Pro", Georgia, "Times New Roman", Times, serif, -apple-system, system-ui, "Segoe UI", "Droid Sans", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei", sans-serif, sans-serif;
}

JDAVJO.png

另一种效果

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,700&display=swap');
@import url('https://fonts.googleapis.com/earlyaccess/notosanskr.css');
@import url('https://fonts.googleapis.com/earlyaccess/notosansjp.css');
@import url('https://fonts.googleapis.com/earlyaccess/notosanssc.css');

sr-read {
    font-family: Montserrat, "Noto Sans KR", "Noto Sans JP", "Noto Sans SC", sans-serif!important;
}

JDArkV.png

后续