CODEWITHSUNDEEP
cssfontsoperacss-transforms
Ana
Ana

Reputation: 37178

Rotated text using Courier font not displayed in Opera

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

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

In case this helps:

about opera

Upvotes: 6

Views: 662

Answers (2)

geocar
geocar

Reputation: 9305

Why is this happening

It's happening because Opera has resolved Courier to courier.fon a bit-mapped font, and Opera has not implemented rotation for bit-mapped fonts.

You get the same results with Modern and Roman and any other font where you have a .fon version.

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

What other solutions do I have

If you are relying on the exact metrics of the font when it is presented on the page, you may want to consider using a web font.

If calling the font "courier" is important, then you could ignore opera: It's not very popular, this is a bit of an obscure bug, and since Opera is ditching Presto for Webkit, it simply involves waiting.

Upvotes: 10

Billy Moat
Billy Moat

Reputation: 21050

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

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

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

Upvotes: -1

Related Questions