使用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 ，它只涉及等待。

Answer 2

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

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

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