在 Writefreely 中使用 Web font 改善中文字体显示

Writefreely 自带的衬线字体(Serif)设置对英文用户还比较友好,但写中文博客实在太丑了。作为一个 editorial designer wannabe,我又很希望自己博客的内容以衬线字体呈现。以下文字就是为了实现我的这一愿望而写的。

目前,我使用了 Google Fonts 的 Web font 服务来实现字体的更改,中文使用 Noto Serif HK(我不懂 Noto Serif 简体中文的标点符号为什么都是半角的),去掉了几个比较轻的字重,以使显示效果更协调,英文使用 Vollkorn(我觉得 Noto Serif 的英文有点丑),并把代码部分的字体单独改成了 Ubuntu Mono.

以下代码复制到 Customize – Custom CSS 中,即可实现这一效果:

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+HK:wght@500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Vollkorn:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

code {
    font-family: "Ubuntu Mono" !important;
}

*:not(code) {
    font-family: "Vollkorn", "Noto Serif HK", "Noto Serif SC" !important;
}

具体字体可以根据喜好修改,可以在 Google Fonts 中挑选。

下一步想试试 justfont 的 Web font 服务(付费)或研究一下中文网字计划,有空再更。

#code #Writefreely #Fediverse