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

那么为什么会发生这种情况以及我有其他解决方案呢?

如果这有帮助:

关于歌剧

#1楼 票数:10 已采纳

为什么会这样呢?

它正在发生,因为Opera已经解决了Courier的快递问题courier.fon是一种位映射字体,并且Opera没有为位图字体实现旋转。

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

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

我还有什么其他解决方案

如果您在页面上显示字体时依赖于字体的确切度量标准,则可能需要考虑使用Web字体。

如果调用字体“courier”很重要,那么你可以忽略opera:它不是很受欢迎,这是一个有点模糊的bug,而且由于Opera放弃了Presto for Webkit ,它只涉及等待。

#2楼 票数:-1

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

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

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

  ask by Ana translate from so

未解决问题?本站智能推荐:

1回复

不能在Opera 12.16中使用css 3d变换

我旧的XP系统上的NVIDIA Quadro FX 1500图形适配器相当陈旧,似乎不在支持的Chrome硬件列表中; 但是,我设法在Chrome上启用了3d变换,使用: 在地址栏中,转到chrome:// flags / 覆盖软件渲染列表 - >启用 现在我正
1回复

Opera不显示外部字体

下一个问题-Opera不显示外部字体。 下一个代码: 看起来一切正常-双引号,“ woff”格式...但是它不适用于Opera。
1回复

如何在悬停时旋转字体 - 真棒图标而不旋转文本?

我正在练习HTML并遇到问题。 首先,我的代码: i:hover{ transform: rotate(360deg); transition: 1s all; } i{ transition: 1s all; } <!DOCTYPE html> <
1回复

字体嵌入Opera快速拨号扩展中

我正在为Opera 15+(基于Webkit的扩展程序)进行快速拨号扩展,并且我想嵌入自定义字体。 现在,我已经非常习惯使用Google字体嵌入字体,但是据文档显示,出于安全考虑,这是不可能的。 然后,我想我需要使用@ font-face在本地加载字体,但是我不知道Opera 15+(默
3回复

可变旋转文本的绝对位置

我有一个垂直标题的横幅标题,该标题已使用position: absolute;对齐position: absolute; 。 但是,此文本是用户定义的,因此随着文本的更改,对齐方式也会更改。 我如何定位它,使其无论文本如何都位于左下角? .banner__wrap { ba
3回复

如何在表格td内旋转文本?

我一直在搜索和玩弄转换:css的rotate()几个小时,但未能得到我想要的结果。 我检查这些链接1 , 2 , 3等等。 其他的标题我不能使它与其他单元格一起使用,当使用空格时,列的宽度会扩展:no-wrap,没有它,文本文件将一个接一个地垂直向上。 下面的图片应该清楚地解释我打算做
1回复

在Chrome和Opera中将select框用作字体时,为什么Open Sans字体似乎已损坏?

HTML CSS 我使用fontsquirrel webfontkit工具将OpenSans字体用作字体。 对于ff,safari来说,一切似乎都很正常,但是在chrome或Opera中打开页面时,它看起来像下面的图像; 我的代码如上所述。 为什么Chrome和Oper
1回复

Opera 18不会在页面上加载自定义字体的粗体变体

在我们的网站上,我们有几种字体。 我像这样嵌入 @font-face { font-family: "Calibri Light"; src: url("fonts/calibri/light/calibri-light.eot?") format("eot"),