使用Courier字体的旋转文本未在Opera中显示

Question

我有以下HTML:

<div class='box'>text</div>?

和CSS:

.box {
    /* non-essential */
    display: inline-block;
    margin: 2em;
    background: plum;

    /* ESSENTIAL */
    transform: rotate(45deg);
    font-family: Courier;
}?

而这就是小提琴.我在这里省略了前缀,但它们在小提琴中.

预期结果:

这也是我在Chrome,Firefox,IE9,Safari中获得的结果.

但是,在Opera中它看起来像这样:

• 如果我取出变换(即div不再旋转),则显示文本.
• 如果我用另一个替换字体,则显示文本.

那么为什么会发生这种情况以及我有其他解决方案呢？

如果这有帮助:

Answer 1

为什么会这样呢？

这种情况正在发生,因为Opera已将Courier解析为courier.fon位映射字体,并且Opera尚未实现位映射字体的旋转.

您可以使用Modern和Roman以及任何其他具有.fon版本的字体获得相同的结果.

您可以查找C:\Windows\Fonts完整列表.

我还有什么其他解决方案

如果您在页面上显示字体时依赖于字体的确切度量标准,则可能需要考虑使用Web字体.

如果调用字体"courier"很重要,那么你可以忽略opera:它不是很受欢迎,这是一个有点模糊的bug,而且由于Opera放弃了Presto for Webkit,它只涉及等待.