Internet Explorer different Font-Size

Question

I'm working on a web page that will run in IE7+ and support English and Japanese language, and I have a little problem with the font size.

On my development machine I'm using IE 9 and I also have 2 other test machines with IE8.The webpage has the X-UA-Compatible set to IE=7.

I have to allow in a span element , that has a fixed width and height, only 12 Kanji characters. And I've thought to set the overflow of the span to hidden, and set the font size, by trial and error, so that the 12 Kanji characters will fit in the span on 2 rows.

I change the language to Japan[ja-JP] form internet options, and on my dev machine it looks how i what it, and the same goes for one of my testing machines, but for the other test machine the font size is a little bigger. The TextSize and Encoding are the same in all browsers.

I've tried setting the font size in px, em and pt, but the difference in the visual size of the font is still there.

Any thoughts on what might be the cause of this?

Firstly, a span can't have a fixed width and height--it's an inline element. — Brian Ustas, Aug 08 '12 at 13:29
@MathieuImbert Because you essentially made it a `div` by making it a block level element... Just make a `div` instead. — Brian Ustas, Aug 08 '12 at 13:33
@depot I disagree. Many people will use `
` for structural elements, and `` for local formatting (label, widget, ...). — Tchoupi, Aug 08 '12 at 13:43
Adding width/height means you want structure. You're not using span as it was intended by overriding its default element type. — Brian Ustas, Aug 08 '12 at 14:03

score 4 · Answer 1 · answered Aug 08 '12 at 13:37

You cannot do this, because you cannot know what fonts will be installed on the end-users pc. Of course you could make a good guess (if you're specifically targeting IE7, chances are there are fonts that are available anyway).

But even then, it could depend on dpi settings of the user. Also, decent browser allow you to adapt font sizes without zooming the screen. So you will have to find a size that works in 95% of the cases, and leave some margin.

If you really need it pixel-perfect, you need an image instead of text (though I would still advise against it). Just embrace the fact that you cannot 100% say what a page will look like on the client.

score 0 · Answer 2 · answered May 25 '13 at 03:50

If it is a browser based problem, then it can be fixed by detecting which browser/version it is, then add a CSS script (use Javascript to do this) depending on which browser it is, with each CSS script containing a different value for the font-size etc.

(BTW I can't help you apart from that, you will need to do further research elsewhere)

score -1 · Answer 3 · edited May 23 '17 at 10:34

-1

You should use an image instead of text. You can generate it on the fly using server's fonts.

edited May 23 '17 at 10:34

Community

1
1

answered Aug 08 '12 at 13:51

Jaime Oro

9,899
8
31
39

Internet Explorer different Font-Size

3 Answers3