中日英字体网页混排实践

| 原创 | fonts 教程 notes

貂明朝字体

2019-04-12

更新:考虑到代码字体集中通过网络加载的 Microsoft-Yahei-Mono 和方正静蕾简体 Jing-Lei 加载速度太慢(30s 左右),决定回退到旧的方案。更新后的字体集:

// 主字体( Source-Han 字体的引入请参考下文的字体选型)
$font: Baskerville, 'Times New Roman', Georgia, 'source-han-serif-sc',
  'Nimbus Roman No9 L', 'Songti SC', 'Noto Serif CJK SC', 'Source Han Serif SC',
  'Source Han Serif CN', 'Microsoft YaHei', STSong, 'AR PL New Sung',
  'AR PL SungtiL GB', NSimSun, SimSun, 'TW\-Sung', 'WenQuanYi Bitmap Song',
  'AR PL UMing CN', 'AR PL UMing HK', 'AR PL UMing TW', 'AR PL UMing TW MBE',
  PMingLiU, MingLiU, serif;

// 代码字体( 其中 $font-hei 字体请参考 [fonts.css](https://zenozeng.github.io/fonts.css/) )
$monospace: Consolas, 'Microsoft Yahei', $font-hei, monospace;

// 标签字体
$label-font: -apple-system, 'Noto Sans', 'Helvetica Neue', Helvetica,
  'Nimbus Sans L', Arial, 'Liberation Sans', 'PingFang SC', 'Hiragino Sans GB',
  'Noto Sans CJK SC', 'Source Han Sans SC', 'Source Han Sans CN',
  'Microsoft YaHei', 'Wenquanyi Micro Hei', 'WenQuanYi Zen Hei', 'ST Heiti',
  SimHei, 'WenQuanYi Zen Hei Sharp', sans-serif;

2018-10-02

更新:由于各平台字体的分立问题,导致在 PC 和 移动端 的显示情况并不友好。最终还是决定启用 Adobe 的思源宋体:source-han-serif,保持样式的统一。

以下为重新选择的字体集

主字体集(回退字体采用 fonts.css 中的 font-song 字体):

$font: Baskerville, 'Times New Roman', Georgia, 'source-han-serif-sc',
  'Nimbus Roman No9 L', 'Songti SC', 'Noto Serif CJK SC', 'Source Han Serif SC',
  'Source Han Serif CN', 'Microsoft YaHei', STSong, 'AR PL New Sung',
  'AR PL SungtiL GB', NSimSun, SimSun, 'TW\-Sung', 'WenQuanYi Bitmap Song',
  'AR PL UMing CN', 'AR PL UMing HK', 'AR PL UMing TW', 'AR PL UMing TW MBE',
  PMingLiU, MingLiU, serif;

代码字体集(从网络加载的字体:Github 的 Microsoft Yahei Mono):

@font-face {
  font-family: 'Microsoft Yahei Mono';
  src: url('/jekyll-ynewtime/media/fonts/Microsoft-YaHei-Mono.ttf');
}
$monospace: 'Microsoft Yahei Mono', Consolas, $font-hei, monospace;

nav 和 footer 等标签字体集(对应 fonts.css 中的 font-hei 字体):

$label-font: -apple-system, 'Noto Sans', 'Helvetica Neue', Helvetica,
  'Nimbus Sans L', Arial, 'Liberation Sans', 'PingFang SC', 'Hiragino Sans GB',
  'Noto Sans CJK SC', 'Source Han Sans SC', 'Source Han Sans CN',
  'Microsoft YaHei', 'Wenquanyi Micro Hei', 'WenQuanYi Zen Hei', 'ST Heiti',
  SimHei, 'WenQuanYi Zen Hei Sharp', sans-serif;

2018-09-27

更新:结合 Github 上的热门项目 fonts.css 重新调整了博客字体设置,主字体采用黑体,强调样式使用楷体,引用字体则用 Adobe 的思源宋体,code 为了保持等宽样式使用了同样来自 Github 的 Yahei-Consolas-Hybrid,而图片的注释字体则定制了徐静蕾的手写体:方正静蕾简体。


2018-09-14

字体选型

Jekyll-ynewtime 主题的字体一直很难选择,需要兼顾的方面很多,在文章中一般会涉及中英文字体,而中文字体字库过于庞大,因此从网页加载速度的角度考虑,需要优先选用系统自建的字体。英文一般系统内置,选用的时候只要注意不同模块,如正文和导航栏、底部栏的区分即可,还有代码块的 monospace 字体选择,也是需要单拿出来考虑。

在设计原则上,我优先选用了开源的泛中日韩 Source Han 字体,这款字体优雅、大方,背后是 Google 的大力支持和 Adobe 公司的精心研发,在字体的呈现效果上是非常理想的(serif,正文)。对于日文字体,我选择了由主持过思源字体开发的 Adobe 日本首席字体设计师 Ryoko Nishizuka(西塚涼子)所设计的貂明朝字体(serif,正文),这款字体‘浓墨重彩’,在笔画勾绘的细节处传神生动,颇具‘貂’的意味。关于貂明朝字体,你可以在 Fate/Typo 知名字体博客上了解更多技术细节。代码块的字体则选择了 Github 上开源的混改版‘Consolas with Yahei’作为主要的字体集。除了主字体集的选用之外,兼顾不同系统字体的适配原则是:英文 > 中文; 系统自带 > 动态加载。

貂明朝字体效果

方案确定

字体的选用根据上述逻辑,按衬体和非衬体分成了两个场景,并综合考虑了美观性、中文字体字库庞大的问题、日文字体兼容和网页动态渲染的延迟问题,最终确定了 font-family,其中,衬体(serif)的 font-family 如下:

$font-serif: 'Noto Serif CJK SC', 'Noto Serif CJK', 'Source Han Serif SC',
  'source-han-serif-sc', 'PingFang SC', 'ten-mincho', 'Source Han Serif',
  SimSun, '宋体';

上述衬体字体的顺序逻辑是:(1)优先选用 Noto 或 Source Han 的简体中文集(需要系统支持);(2)如果系统中没有这两类字体,则尝试动态加载 Adobe 的 source-han-serif-sc 字体(需要配置 _config.yml)(3)若动态加载失败,对于 MacOS 系统,优先考虑系统自带的平方字体;(4)对于 Win 或 Android,则尝试动态加载 Adobe 的 ten-mincho 字体;(5)若上述全部加载失败,回落到宋体,或系统默认简体中文字体。

对于 Jekyll-ynewtime 主题,衬体主要应用在文章主体,即正文的显示中,包括但不限于文章标题,子标题,引用和强调。

非衬体(sans-serif)的 font-family 如下:

$font: Baskerville, 'Times New Roman', Georgia, 'source-han-serif-sc',
  'Nimbus Roman No9 L', 'Songti SC', 'Noto Serif CJK SC', 'Source Han Serif SC',
  'Source Han Serif CN', 'Microsoft YaHei', STSong, 'AR PL New Sung',
  'AR PL SungtiL GB', NSimSun, SimSun, 'TW\-Sung', 'WenQuanYi Bitmap Song',
  'AR PL UMing CN', 'AR PL UMing HK', 'AR PL UMing TW', 'AR PL UMing TW MBE',
  PMingLiU, MingLiU, serif;
$font-sans: Consolas, Georgia, Helvetica, Tahoma, Arial, 'Noto Sans CJK SC',
  'Noto Sans CJK', 'Source Han Sans', 'Source Han Sans SC',
  'source-han-sans-sc', 'PingFang SC', STXihei, '华文细黑', 'Hiragino Sans GB',
  'Microsoft YaHei', '微软雅黑', '文泉驿微米黑', Heiti, '黑体';

上述非衬线字体的顺序逻辑是,(1)优先考虑英文字体,如 Windows 的 consolas 和 mac 的 Helvetica;(2)中文字体优先选择 Noto sans 和 source han sans(同样,需要系统支持);(3)若系统没有安装上述的思源字体,则对 mac 用户,优先考虑系统默认的苹方字体(新系统),老系统回落到华文细黑,对 win 用户优先选用 Microsoft Yahei,Linux 则回落到文泉驿微米黑;(4)若全部启用失败,回落到黑体。

对于 Jekyll-ynewtime 主题,非衬体的应用场景是:(1)顶部导航栏;(2)分隔符;(3)底部 footer。