1 min read

解决 Han.css + 思源宋体标点位置不正确的问题

在使用 Han.css 的时候,如果引入自定义第三方字体,有可能会出现标点位置不正确的问题。这个主要是对标点的 line-height 设置不正确导致的。默认样式设置了 line-height: 1.1,但是对于思源宋体来说,设置为 1.4 才正确。

Han/demo/han.css at 970d163c6af207027931dcde02c1cb7138de32c9 · ethantw/Han
「漢字標準格式」印刷品般的漢字排版框架 Han.css: the CSS typography framework optimised for Hanzi. - ethantw/Han

你需要手动覆盖默认样式:

h-char.bd-hangable:lang(zh-Hans) > h-inner,
h-char.bd-hangable:lang(zh-CN) > h-inner,
h-char.bd-hangable:lang(ja) > h-inner {
  line-height: 1.4;
}

不同的字体可能需要不同的值,请自行尝试最合适的值。