6

我有以下 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 不再旋转），则显示文本。
  • 如果我用另一种字体替换字体，则会显示文本。

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

如果这有帮助：

关于歌剧

4

2 回答 2

10

为什么会这样

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

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

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

我还有什么其他解决方案

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

如果调用字体“courier”很重要，那么你可以忽略 opera：它不是很流行，这是一个有点晦涩的错误，而且由于Opera 正在放弃 Presto 而使用 Webkit，它只涉及等待。

于 2013-04-27T10:58:32.520 回答
-1

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

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

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

于 2012-09-17T14:12:15.283 回答