css - 使用 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 .我在这里省略了前缀，但它们在 fiddle 中。

预期结果:

这也是我在 Chrome、Firefox、IE9、Safari 中得到的结果。

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

• 如果我取出变换(即 div 没有旋转 不再)，然后显示文本。
• 如果我用另一种字体替换字体，则会显示文本。

那么为什么会这样以及我还有哪些其他解决方案？

如果这有帮助:

Answer 1

为什么会这样

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

使用 Modern 和 Roman 以及您拥有 .fon 版本的任何其他字体，您会得到相同的结果。

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

我还有哪些其他解决方案

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

如果调用字体“courier”很重要，那么您可以忽略 opera:它不是很流行，这是一个有点晦涩的错误，并且自 Opera is ditching Presto for Webkit ，它只涉及等待。​​