From PSD to HTML/CSS

Just wondering how come final website deliverables (HTML/CSS) end up not looking exactly (开发者_JAVA技巧pixel perfect) like the layout that was designed in Photoshop? For examples, 14pt in PS is not exactly 14pt in HTML. Why?

---

Because different browsers have different rendering engines.

In particular, a font may be rendered quite differently between the various browsers and operating systems in current use - Safari and MacOS use more anti-alisaing than Firefox or IE, but IE9 has a new feature called ClearType, which also affects font rendering.

The end result is that between the various browsers, there can be significant differences between how your fonts look, to the point that it can affect your layout.

This site tries to explain it a bit better: http://blog.typekit.com/2010/10/21/type-rendering-web-browsers/

The bottom line: Don't design your pages to be pixel perfect -- you will be dissapointed. HTML and the web just don't work that way; accept this, and you'll have a much happier life.

(Oh, and there's also the issue of not even getting the same font, if you specify one which isn't available on the user's browser).