中文斜体字的版式优化

拉丁字母文字大多支持一种把字略微倾斜的书写方式“斜体”（Italic style，故又称意大利体）。这种写法在西方文字书写中，常被用于强调某些内容的特异性，又或者作为引述著作名称时的标注格式。鉴于西方的这种文化霸权，各大显示文字的平台基本都支持斜体版式，甚至将其作为一种文字编辑软件的必选内置功能。

然而，这对以中文为首的东方文字来说是一种尴尬。我们固然可以自然适用已有的斜体到中文字符上，然而，从直观感受看，这只会让人感觉到方块字的版式美感遭到了破坏。历史上，若想要表达强调的效果，采用竖排的中文往往选择在文字左侧打点强调的做法；又或者想要引述著作时，中国人发明了书名号来代替斜体。总之，从当代数码文字渲染的角度看的结果就是，对中文用户来说，我们的计算机使用体验一直都少了一截。

几年前，我读了一部科幻小说《盲视》。这部小说的原作是英语，作者非常喜欢使用斜体来强调某些特殊内容或者描绘主人公的内心话语。此时，版式已经成为了内容的一部分。如果在翻译的过程中完全忽视这一点，会造成体验的严重缺失。翻译的编辑选择的处理方式是，正文常规使用宋体，所有出现了斜体的部分都用楷体代替。效果非常好。

后来我才知道，这是中文翻译时处理的常规做法。我一直觉得这种用两种字体来表达不同内容的效果非常好。然而，我用过的大多数支持中文的文本编辑器都并没有提供类似的功能。又只能自己动手了。

写点 CSS 吧。

CSS 的字体处理机制

参照 MDN 的官方教程，CSS 中，文字字体由 font-family 属性控制，斜体与否由 font-style 属性控制。

一般来说，斜体字会带有 <em> 标签，黑体字会带有 <strong> 标签，二者可能同时存在。所以要在 CSS 中对 em、em strong 和 strong em 进行定义。

然而，如果我们像这样直接简单粗暴地使用 font-sytle 把所有出现斜体的内容都改成不斜的楷体也会出问题：

em,
strong em,
em strong {
  font-family: "楷体", "KaiTi", "Times New Roman", serif, sans-serif;
  font-style: normal;
}

这样做的结果就是英文字符也跟着再也没有斜体了。这种处理方案并不优雅，不是我们想要的。

使用 @font-face 自定义字体

参照 MDN 的官方教程，我们可以使用 @font-face 临场自定义一种字体，再在后面的 CSS 中引用。

这种方式定义的字体使用 src 属性描述来源，和 font-family 一样逐个搜寻采纳。该属性可以采用两种方法引述字体：local() 或者 url()。中文使用者家里不会连个楷体字库都没吧。我们完全可以直接用 local(楷体) 来找东西。

此外，这种方式定义字体还可以指定渲染特定范围的 Unicode 字符，由 unicode-range 属性定义。只要对拉丁字符和分别

这里是我随手写的，比较粗糙，纯当示范：

@font-face {
  font-family: "Chinese-Italic";  /* Your Chinese font */
  src: local("KaiTi"),
      local("STKaiti"),
      local("楷体"),
      local("楷体_GB2312"),
      local("FangZhengKaiTi"),
      local("方正楷体"),
      local("KaiTi_GB2312"),
      local("Source Han Serif SC");
  font-style: italic;  /* Disable italic for Chinese characters */
  unicode-range: U+4E00-9FFF;  /* Range for Chinese characters */
}

@font-face{
  font-family: "Latin-Italic";  /* Your Latin font */
  src: local("Times New Roman"),
      local("Georgia"),
      local("Times"),
      local("serif");
  font-style: normal;  /* Enable italic for Latin characters */
  unicode-range: U+0000-00FF;  /* Range for Latin characters */
}

然后，配合你所采用的 HTML 模板进行字体指派即可。

em, 
strong em,
em strong {
  font-family: "Latin-Italic", "Chinese-Italic", "Times New Roman", serif, sans-serif;
  font-style: italic;
}

我的自定义中文斜体字优化使用场景

当然了，会了 @font-face 这一招之后，就可以自选地在各个 Unicode 区域里调整了。也未必要用楷体代替斜体，可以自己尝试各种字体搭配，达成喜欢的效果。

这里讲几个我已经用上了的场景。

在 Jekyll 博客上适用

如果你有对博客主题的完全控制权，稍微改一改 CSS 也不是什么难事。

这里还是以本博客当前采用的 Chirpy 主题为例。Chirpy 的正文在 <div class="content"> 标签里，其样式在 _sass/addon/commons.scss 里定义。找到 .content 所在位置添加即可。

.content {
  font-size: 1.08rem;
  margin-top: 2rem;
  overflow-wrap: break-word;

  em {
    font-family: $italic-font-family;
    font-style: italic;
  }

  strong em,
  em strong {
    font-family: $italic-font-family;
    font-style: italic;
  }
    
    ...

这里的 $italic-font-family 是 SCSS 的变量。我在同一目录下单开了一个 font.scss 定义这些字体。

@font-face {
  font-family: 'Chinese-Italic'; /* Your Chinese font */
  src: local("KaiTi"),
      local("STKaiti"),
      local("楷体"),
      local('Source Han Serif SC');
  font-style: italic; /* Disable italic for Chinese characters */
  unicode-range: U+4E00-9FFF; /* Range for Chinese characters */
}

@font-face {
  font-family: 'Latin-Italic'; /* Your Latin font */
  src: local('Microsoft Yahei'), local('Times New Roman'), local('Georgia'),
    local('Times'), local('serif');
  font-style: normal; /* Enable italic for Latin characters */
  unicode-range: U+0000-00FF; /* Range for Latin characters */
}

并在 _sass/addon/variable.scss 中引述这些字体：

@import 'font';

...

$italic-font-family: 'Chinese-Italic', 'Latin-Italic', sans-serif !default;

本博客适用后的示范效果

• 英文正文：Test text in test text
• 英文粗体：Test text in test text
• 英文斜体：Test text in test text
• 英文粗斜：Test text in test text
• 中文正文：测试文本中的测试文本
• 中文粗体：测试文本中的测试文本
• 中文斜体：测试文本中的测试文本
• 中文粗斜：测试文本中的测试文本

在 Typora 主题里适用

我目前常用的 Typora 编辑器主题是 novel-tex-theme。我对这个主题非常满意，无论是文学创作还是技术文章创作都看着很舒服。唯一的美中不足就是没有我想要的斜体变楷体功能。其实一开始是为了折腾这个来着的，但后来发现其实放在博客上更适用

字体定义在 font.css 里。根据上文方法修改添加 @font-face 并添加对 em 的 CSS 即可。

在 EPUB 电子书中适用

只在文本编辑器里自己看着舒服当然还不够。Typora 自带图片和 EPUB 的导出功能，可以用喜欢的方式把文字展示给别人。

Typora 的 EPUB 渲染需要先安装 Pandoc，然后可以在设置里指定选用自己的 CSS 进行渲染。

这里建议采用 epub-css-starter-kit 作为基础模板，根据自己的需要慢慢修改。

如此一来，如果你也要翻译什么带一堆斜体字的坑爹英文书，也有比较方便的中文译本渲染解决方案了。