CSS转换：rotate（）导致丑陋的字体呈现

Question

在Chrome和Firefox上，旋转的文字在垂直笔划（现在是水平的）上都有奇怪的宽度和间距异常。 CSS是：

font-family: arial;
transform: rotate(-90deg)

在Chrome和Firefox上：

另见CodePen here。