Rotate text using Courier font not displayed in Opera

Question

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 a script . I omitted the prefixes here, but they are in the violin.

Expected Result:

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

However, in Opera, it looks like this:

• If I select the transform (i.e. the div is not rotated anymore), then the text is displayed.
• If you replace the font with another, the text will be displayed.

So why is this happening and what are my other solutions ?

In case this helps:

Answer 1

Why is this happening

This is because Opera allowed courier.fon font, and Opera did not implement a rotation for bit-mapped fonts.

You get the same results with Modern and Roman and any other font that has a .fon version.

You can look at C:\Windows\Fonts for a complete list.

What other solutions do I have

If you rely on accurate font metrics when presented on a page, you may want to use a web font.

If calling the courier font is important, then you can ignore the opera: it is not very popular, this is a bit of an incomprehensible mistake, and since Opera broadcasts Presto for Webkit , it just means waiting.

Answer 2

If you change the font-family tag to below, it works:

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

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