制作古籍,经书时,字体的选择和字库的数量是很重要的事。 唯一的载体就是文字,如何呈现最合适,最完美的文字,便于阅读符合其自身特质是首先要考虑的事情。 时代进步了,载体也革新了很多代,最大限度的还原经典,且符合人们的阅读习惯,是个很复杂的话题,包括文字的演变,古音学等。甚至上篇提到的国内推广简体字。

其他内容暂且不提,本篇主要处理字体问题,包括:

  • 选择庄严,易读的字体
  • 字库要丰富(由于是流传千百年的经典,繁体字,生僻字较多)
  • 最好是系统自带字体,否则下载体量过大导致阅读体验变差。
  • 考虑引入最优字体,或者内嵌字体子集(上篇博文有提到)

昨日有幸看中华电子佛典的时候看到新更新的 笨居士的 關於「漢文大藏經」網站的字體 感叹一人维护整部 汉文大正藏的同时,也终于看到一篇思考经典文字选择的文章。 其中也提到了 ”為什麼沒有簡體字版?

佛經原本是用繁體字寫的。如果要轉換成簡體字,需要專業人士的逐字校對,耗時耗力。也不能僅使用自動化工具轉換,因為所有簡繁轉換的軟件都是為現代文設計的,用來轉換古文,錯誤太多。所以,我們暫不提供簡體字版,非常抱歉。但是,隨著各方技術的進步,尤其是 AI,我相信不遠的將來,一定會有圓滿的解決方案出現! P.S. 繁體字其實挺好看的,看著看著就習慣了。

个人深有同感,表示赞同,但确实也有很多简体字的需求,不同的环境应用等。所以依据这些要求,一步步开始梳理。

需要的三类字体

  • 宋体 : 用于显示正文内容
  • 黑体 : 用于互联网电子设备阅读习惯的无衬线字体
  • 楷体 : 用于引用,对话等内容

各平台的默认字体中可用的

必须考虑系统兼容性,都可以以最好的状态呈现内容。优先选用系统字体,不影响阅读的情况下缓存最优字体(通过google font)。

Windows

宋:PMingLiU , MingLiU 黑:Microsoft Yahei 楷:KaiTi , STKaitiSC-Regular

iOS/MAC :

宋:Hiragino Mincho ProN W3/W6 黑:PingFangSC 楷:KaiTi , STKaitiSC-Regular

Android:

宋:Noto Serif CJK 黑:Noto Sans CJK 楷:无

入选的字体

宋体

Noto Serif SC / TC 最优 Hiragino Mincho ProN 系统字体,显示优秀,但字库小 PMingLiU 字库大 MingLiU STSongti-SC-Regular 系统 SimSun 系统 FangSong 系统

黑体 :

Noto Sans CJK 最优 方正兰亭黑 pro FZLTXHPro–GB1-4 显示优秀,但字库小 PingFangSC 系统 Microsoft Yahei 系统

楷体

引用 ,对话等

KaiTi 系统 STKaitiSC-Regular 系统

使用 google font

因其易读性,庄严,以及历史积淀,选用 Noto serif 系列字体。 因经书多为繁体书写,部分繁体字、异体字在简体中没有,保险期间添加繁体字库(看属性简繁字库数量一致,但暂不能逐个验证先添加)。 google font 新技术使用分段(unicode区位)下载大字体,首先从常用的第一平面开始下载,越往后才下载复杂少用的文字,所以体验上是可以接受的,载入上问题不大,且在载入过程以选用了系统默认字体替代。

google font

1
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&family=Noto+Serif+TC:wght@400;700&display=swap" rel="stylesheet">

国内访问有问题,故寻找国内镜像

国内镜像

1
<link href="https://fonts.loli.net/css2?family=Noto+Serif+SC:wght@400;700&family=Noto+Serif+TC:wght@400;700&display=swap" rel="stylesheet">

classes

1
2
3
.font-kt
.font-st
.font-sans

编排优先级设置 stylesheet

默认:[宋] 庄严,历史 宋体: Noto Serif SC > Noto Serif TC > Hiragino Minicho ProN > MingLiU> PMingLiU > STSongti-SC-Regular > SimSunserif 楷体:STKaitiSC-Regular > KaiTiserif 黑体: FZLTXHPro--GB1-4 > PingFangSC > Microsoft Yaheisans

1
2
3
4
5
6
body{
	@extend .font-st
}
.font-st{ font-family:"Noto Serif SC","Noto Serif TC","Hiragino Minicho ProN",MingLiU,PMingLiU,STSongti-SC-Regular,SimSun,serif;}
.font-kt{ font-family: STKaitiSC-Regular,KaiTi,serif; }
.font-sans{ font-family: "FZLTXHPro--GB1-4",PingFangSC,"Microsoft Yahei",sans;}