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

【问题标题】：Rotated text using Courier font not displayed in Opera使用 Courier 字体的旋转文本未在 Opera 中显示
【发布时间】：2012-09-17 13:58:35
【问题描述】：

我有以下 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 中它看起来像这样：

如果我取出transform（即div没有旋转不再），然后显示文本。
如果我将字体替换为另一种字体，则会显示文本。

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

如果这有帮助：

【问题讨论】：

不是答案，仅供参考 - 在 Mac 上它在 Opera 中完美运行
您是否尝试过使用供应商特定的前缀来查看是否有帮助？ -o-transform: 旋转(45度);
@BillyMoat 是的，她做到了——你看到小提琴了吗？
@ZoltanToth - 啊，只看了这里发布的代码 - 我的错。
我的理论是，Opera 确实支持 (.fon) 字体类型，并且这种字体类型可能没有显示带有转换属性的文本的功能（使用 .fon 扩展名确认它，例如“Roman ”）。如果我们在 Chrome 上验证字体，它是以“Courier New”/fallback 字体呈现的，而不是 Courier（Courier Regular – 在您的操作系统字体列表中验证这一点）。

标签： css fonts opera css-transforms

【解决方案1】：

为什么会这样

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

Modern 和 Roman 以及任何其他具有.fon 版本的字体都会得到相同的结果。

您可以在C:\Windows\Fonts 中查看完整列表。

我还有什么其他解决方案

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

如果调用字体“courier”很重要，那么你可以忽略opera：它不是很流行，这是一个有点模糊的错误，因为Opera is ditching Presto for Webkit，它只是涉及等待。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

我知道它有效，我在问题中提到了这一点。如果我使用 monospace、Courier New、Arial、Helvetica ......但不是 Courier。我要求一种不涉及删除转换或更改字体系列的方法。
抱歉，我今天的注意力显然不够:(