Windows和Mac OS X之间的字体大小

Question

I work on a project and i want to know Why there is a difference in font size(width) on web between Windows and Mac OS X. I found that all the browsers on Mac will have the same size, but in the Windows it differ from browser to anther. i frustrated and wait to here from you. My question now why there is a difference in width between them?

Answer 1

There are many possible reasons:

1. Different fonts. Very few Mac fonts are identical to fonts on Windows. (It's not clear if you're expecting the Windows results to match the Mac results or just for them to be consistent on Windows.)

2. Different default sizes. Most browsers have defaults for font and size, and they may not all be the same.

3. Different interpretations of font size. When you say you want (for example) a 10-point font, it's not entirely well-defined what that means. There are true points (1/72.27 inch) but more commonly computer points (1/72 inch). Do you want the character cell height? With or without internal leading? Or did you mean the actual character height or merely the font's ascent? Different browsers may choose to interpret sizes differently.

4. Different resolutions. Browsers may handle different screen resolutions differently. Windows has a concept of a "logical inch", which is typically larger than a true inch on displays. But how much larger is customizable by the user. Some browsers may ignore the logical inch and use the actual DPI of the device (or at least what they think the DPI is--the OS may not actually know).

5. Different rendering technologies. Whether you use hinting, antialiasing, subpixel rendering (eg, ClearType), or some combination of these can slightly affect the width of text (even if everyone agrees on the exact font and the exact vertical size).

6. Different scales. Most browsers provide a scaling feature, and it's possible that they aren't defaulting to the same value on different browsers. Also note that as you change the scale, the text width often won't scale linearly (see #5).

Any one of these issues can lead to differences in text width (which can cascade into different word wrapping choices), making pages look different from browser to browser and machine to machine. In many cases, you might have a combination of these issues thwarting consistency.

The solution is to design layouts to be flexible. Don't create implicit dependencies on font sizes by hardcoding things (like the size of a ) and expect the text to always fit. Generally, choose sizes relative to the size of the text, and be prepared for variation in the actual text size.

Answer 2

There's a difference because there is no standard that mandates the text size for web page rendering. And so browser vendors are free to render text at whatever size they wish.

Answer 3

I've run into this problem working on HTML ads that need to render consistently. In such situations, elements even a few pixels off can make a design look amateur.

One way to get more accurate cross-platform results is to specify pixel values rather than points or ems. Such text will render at the same size regardless of device resolution, and will still scale properly when zooming in and out. Even on a Retina/HD display, since a CSS pixel isn't necessarily the same as a device pixel.

In addition, forcing the use of either a web font or a very common font, along with explicitly setting the anti-aliasing method, will get you even closer to pixel-perfect results. I've found the code below to render nearly identically regardless of environment.

html, body {
    font-family: Arial, sans-serif;
    font-size: 13px;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}