化学式利用上下标来表示物质中的原子组成和电荷状态。在通常情况下，在排版时输入化学式需要使用额外的Unicode字符（⁰¹²³⁴⁵⁶⁷⁸⁹⁺⁻、₀₁₂₃₄₅₆₇₈₉），或者手动应用上下标样式，或者使用专门的语法（比如TeX）。
然而，使用常规键盘输入上下标字符并不方便，渲染TeX则往往需要繁重的依赖。有没有办法可以在不用TeX的情况下使用类似TeX语法绘制上下标呢？答案是有的，我们可以借助TrueType/OpenType字体的连字功能实现。
使用连字渲染化学式
现代字体技术允许我们通过字体的连字（ligature）功能来根据上下文替换字符的字形。该功能最初是用于 f + i = fi 这样的排版渲染需求，以及用于渲染像阿拉伯语这样字形和上下文强相关的文字。许多编程字体中也通过连字来渲染多字符操作符（比如将!=渲染为 ≠）。
通过连字特性，我们可以实现纯ASCII化学式的渲染，只要定义以下连字规则：
- 当数字出现下标标记符
_之后时，使用下标字形。 - 当数字或
+、-符号出现在上标标记符^之后时，使用上标字形。
为了方便，我们还可以规定
- 当数字出现在下标字形之后时，维持下标字形。
- 当数字或
+、-符号出现在上标字形的数字之后时，维持上标字形。
我们可以通过FontTools库来为现有字体添加这些连字规则。下面的Python脚本实现了这个功能：
build_chem_font.py
#!/usr/bin/env python3
from fontTools.ttLib import TTFont
from fontTools.ttLib.tables._g_l_y_f import Glyph, GlyphComponent
from fontTools.feaLib.builder import addOpenTypeFeatures
from fontTools.pens.recordingPen import RecordingPen
from fontTools.pens.transformPen import TransformPen
from fontTools.pens.ttGlyphPen import TTGlyphPen
import iodef build_chem_font(font):glyf, hmtx = font["glyf"], font["hmtx"]gord, cmap = font.getGlyphOrder(), font.getBestCmap()gset = font.getGlyphSet()upm = font["head"].unitsPerEmdef register_glyph(name, glyph_obj, width, lsb):glyf[name] = glyph_objhmtx[name] = (width, lsb)if name not in gord:gord.append(name)empty_glyph = Glyph()empty_glyph.numberOfContours = 0register_glyph("hide.glyph", empty_glyph, 0, 0)def build_derivative(src, scale=1, xoff=0, yoff=0):rec = RecordingPen()gset[src].draw(rec)tt_pen = TTGlyphPen(gset)t_pen = TransformPen(tt_pen, (scale, 0, 0, scale, xoff, yoff))rec.replay(t_pen)return tt_pen.glyph()caret, lowline = cmap.get(ord("^")), cmap.get(ord("_"))nums = [cmap[ord(c)] for c in "0123456789"]pm = [cmap[ord(c)] for c in "+-"]for g in nums + pm:gl = build_derivative(g, 0.6, 0, int(upm * 0.35))register_glyph(f"{g}.sup", gl, int(hmtx[g][0] * 0.6), 0)for g in nums:gl = build_derivative(g, 0.6, 0, int(upm * -0.1))register_glyph(f"{g}.sub", gl, int(hmtx[g][0] * 0.6), 0)font.setGlyphOrder(gord)feature = f"""@supprefix = [{caret} {" ".join([c+ ".sup" for c in nums])}];@subprefix = [{lowline} {" ".join([c+ ".sub" for c in nums])}];@supchar0 = [{" ".join(nums + pm)}];@subchar0 = [{" ".join(nums)}];@supchar = [{" ".join([c+ ".sup" for c in nums + pm])}];@subchar = [{" ".join([c+ ".sub" for c in nums])}];feature calt {{lookup SUB_CHAIN {{ sub @subprefix @subchar0' by @subchar; }} SUB_CHAIN;lookup SUP_CHAIN {{ sub @supprefix @supchar0' by @supchar; }} SUP_CHAIN;lookup HIDE_CARET {{ sub {caret}' @supchar by hide.glyph; }} HIDE_CARET;lookup HIDE_LOWLINE {{ sub {lowline}' @subchar by hide.glyph; }} HIDE_LOWLINE;}} calt;"""with io.StringIO(feature) as fea:addOpenTypeFeatures(font, fea)if __name__ == "__main__":import argparseparser = argparse.ArgumentParser(description="Create chemical symbols font.")parser.add_argument("input", help="Path to input file (TTF font)")parser.add_argument("output", help="Path to output file")args = parser.parse_args()font = TTFont(args.input)build_chem_font(font)font.save(args.output)
通过python3 build_chem_font.py input.ttf chem.ttf命令运行该脚本，即可生成一个支持化学式渲染的字体文件chem.ttf。之后可以在浏览器环境中通过css@font-face加载字体查看结果：
preview.html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>font preview</title><style>@font-face {font-family: 'ChemFont';src: url('chem.ttf') format('truetype');}body {display: flex;width: 100vw;height: 100vh;box-sizing: border-box;margin: 0;padding: 8px;}#preview {font-family: 'ChemFont', monospace;flex: 1;font-size: 24px;}</style>
</head>
<body><textarea id="preview">H^+ + OH^- = H_2O
Ag^+ + Cl^- = AgCl
Ba^2+ + SO_4^2- = BaSO_4
Fe^3+ + 3OH^- = Fe(OH)_3
CO_3^2- + 2H^+ = H_2O + CO_2
2Al + 6H^+ = 2Al^3+ + 3H_2
Cu^2+ + Fe = Fe^2+ + Cu
CH_4 + 2O_2 = CO_2 + 2H_2O
C_2H_5OH + 3O_2 = 2CO_2 + 3H_2O
CH_2=CH_2 + Br_2 = CH_2BrCH_2Br
CH_3COOH + C_2H_5OH = CH_3COOC_2H_5 + H_2O
C_6H_6 + HNO_3 = C_6H_5NO_2 + H_2O
C_6H_12O_6 + 6O_2 = 6CO_2 + 6H_2O
2CH_3OH + 3O_2 = 2CO_2 + 4H_2O
NH_4^+ + OH^- = NH_3 + H_2O
2I^- + Cl_2 = I_2 + 2Cl^-
MnO_4^- + 5Fe^2+ + 8H^+ = Mn^2+ + 5Fe^3+ + 4H_2O
Cr_2O_7^2- + 6Fe^2+ + 14H^+ = 2Cr^3+ + 6Fe^3+ + 7H_2O
CH_3CH_2OH + CuO = CH_3CHO + Cu + H_2O</textarea>
</body>
</html>
最终的渲染结果如下：
注：本方法修改了字体文件，操作前请先参考字体的授权规则和用户协议，避免未授权的编辑。