使用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;
}​

这是the fiddle。我在这里省略了前缀，但它们都在小提琴中。

预期结果：

这也是我在Chrome，Firefox，IE9，Safari中获得的结果。

然而，在Opera中它看起来像这样：

• 如果我取出变换（也就是说，div不会旋转 再见），然后显示文字。
• 如果我用另一个字体替换字体，则显示文本。

所以为什么会发生这种情况和我还有其他解决方案？

如果这有帮助：

Answer 1

为什么会发生这种情况

发生这种情况是因为Opera已将 Courier 解析为courier.fon位图字体，并且Opera尚未实现位图字体的旋转。

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

您可以查看C:\Windows\Fonts以获取完整列表。

我还有其他什么解决方案

如果您在页面上显示字体时依赖于字体的确切指标，则可能需要考虑使用网络字体。

如果调用字体＆＃34; courier＆＃34;很重要，那么你可以忽略歌剧：它不是很受欢迎，这是一个有点模糊的错误，自Opera is ditching Presto for Webkit以来，它只涉及等待。​​

Answer 2

如果您将font-family标记更改为以下标记，则可以：

font-family:"Courier New", Courier, monospace;

http://jsfiddle.net/3tTyp/1/