css 文字渲染

css 文字渲染实测结论：测试的内容都是使用span 标签（即是用内联元素进行测试的）

具体显示效果可以参考：青柠设计：https://qingning6.com/

参数说明：字体自带行高（使用的是数值）：fontLineHeight；css设置的行高（使用的是数值）：lineHeight；字大小：fontSize； 行数： row；列数： col；文字宽高：width、height；字间距：letterSpacing；

水平文字：

1. 单行文字，文字的高度：height = fontLineHeight
2. 多行文字，文字高度：height =  fontLineHeight * row + (lineHeight - fontLineHeight) * (row - 1) = fontLineHeight  + lineHeight * (row - 1), （自带行高 * 行数 + （设置的行高 - 自带行高 * (行数 - 1)）
3. 不管单行还是多行文字的宽度，可以使用 canvas 的 measureText  竖行测量出单个文字的宽度加上字间距：measureText(字).width  + letterSpacing

竖行文字：

1. 单列文字： 文字的宽度：width = fontLineHeight。
2. 多列文字：文字的宽度：width = fontLineHeight * col+ (lineHeight - fontLineHeight) * (col - 1) = fontLineHeight  + lineHeight * (col - 1), （自带行高 * 列数 + （设置的行高 - 自带行高） * (列数 - 1)）
3. 不管单列还是多列：文字的高度：height = fontLineHeight + letterSpacing

测试图如下。测试字体 演示春风楷 fontLineHeight：84；fontSize：70，文字方向水平

设置行高后：lineHeight：2

文字方向竖行：图一 未设置行高，图二设置行高为2

图一

图二