6

I have the following HTML:

<div class='box'>text</div>​

and CSS:

.box {
    /* non-essential */
    display: inline-block;
    margin: 2em;
    background: plum;

    /* ESSENTIAL */
    transform: rotate(45deg);
    font-family: Courier;
}​

And this is the fiddle. I've omitted the prefixes here, but they are in the fiddle.

Expected result:

expected result

It is also the result I get in Chrome, Firefox, IE9, Safari.

However, in Opera it looks like this:

opera result

  • If I take out the transform (that is, the div is not rotated anymore), then the text is shown.
  • If I replace the font with another one, then the text is shown.

So why is this happening and what other solutions do I have?

In case this helps:

about opera

4

2 に答える 2

10

なぜこうなった

これは、Opera がCourierをcourier.fonビットマップ フォントに解決し、Opera がビットマップ フォントの回転を実装していないために発生しています。

モダンとローマン、およびバージョンがあるその他のフォントで同じ結果が得られます.fon。

C:\Windows\Fonts完全なリストを参照できます。

他にどのような解決策がありますか

ページに表示されるフォントの正確なメトリックに依存している場合は、Web フォントの使用を検討することをお勧めします。

フォントを「クーリエ」と呼ぶことが重要な場合は、opera を無視することができます。あまり人気がなく、これはちょっとあいまいなバグです。Opera は Webkitのために Presto を捨てているので、待つだけです。

于 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 に答える