css中字体大小使用的终极方案

下面的文章来自
http://www.thenoodleincident.com/tutorials/box_lesson/font/index.html
对文字的大小问题有很好的讲解，作者最早提供了一种现在看来最好的文字大小的控制方法。
body{
font-size:76%
}
p{font-size:1em}
h1{font-size:1.5em}
在body中使用百分数，因为大多数的浏览器的默认字体是16px的，但是16px的字体大小略大，很多人喜好12px，因此用76％来得到12px。然后css的其他部分，以此未基础，全部使用em来控制字体大小。

因为，em是最好的字体控制方式，首先em是相对的，比px之类绝对大小灵活。
其次，百分数虽然也是相对的，但是因为百分数定义存在误差积累的问题（如果根据百分数计算出来的值，很可能被浏览器进行四舍五入地等处理，如果多次进行这样的处理，得到的值就不能精确地还原了。）
而且em定义的字体大小在浏览器中是可以进行大小调整的，px之类定义的是不能进行字体大小控制的。因此就算用户调整了浏览器的默认字体大小，也可以通过调整浏览器的显示来放大或缩小字体大小。
所以，em是最好的字体方案。

I'd had enough.

Being unhappy with the current wisdom and distrustful of our browsers, I wanted to have the font sizing options laid out so i could see where they did and didn't work. So I made 264 screenshots.

This collection is posted for anyone else who is unhappy and distrustful.

---

To recap:

One sizing wisdom is that a document's main text should be left alone so it can display at whatever the browser default is. This sounds good, but since most browsers default to a text size that I have to back up to the kitchen to read, I decided the zen approach to design wasn't for me. Besides, if I was really zen I wouldn't write a stylesheet.

My own experience is that it's easier to read text that's smaller than default, and a little larger than the toolbar font. I figure it's reasonable to believe people will have their resolution set so they can read the toolbar.

So I want two things from a text sizing method: that it present my choice across the main browsers, but still be resizeable to respect people's needs and different hardware.

As usual our browsers do not co-operate.

Pixels are a very popular way of setting font size. With these a designer knows what the page is going to look like across browsers. The problem with pixels is that IE PC is incapable of resizing them.

Ems are a nice idea. Ems can be resized by all browsers. The problem with ems is IE PC will take sub 1 em sized text and display it as microscopic when the user has their browser set at Smaller. And a great many IE PC users surf at Smaller; it makes default text a nice readable size, yet doesn't adjust pixels. So these surfers get to have both the Geocities and the K10K type sites look good. ...and when they hit the site of a designer who's trying to be responsible by using ems to achieve smallish text size, the result is lines of unreadable fuzz. So ems don't work.

Percentage looks good. I thought there was a reason we weren't using percentage much, and had avoided it till lately.

Keywords are pretty good. There is an issue with keywords in IE PC 5.0 and 5.5, but it's nicely handled by Todd Fahrner in his ALA article, Size Matters. But Opera for PC presents keywords a size too large. That would also need to be fixed.

Matt Round has come up with a very interesting javascript method for dealing with small text and our browsers. He uses sub 1 ems, then uses js to keep things from becoming too small. Here's his explanation.

I've also discovered a useful glitch by setting the base font size set to 100% when using sub 1 ems. This keeps IE PC from going microscopic. I have no idea why. It effects a few other browsers too, so in many of the examples I've added this ruleset to learn more about the quirk.

Rijk van Geijtenbeek notes elsewhere: "Unfortunately, Opera has a bug where 100% actually works as the inherited value minus 1 pixel. This works out to illegible for deeply nested elements."

---

That's the background to this experiment. Here's the screenshots:

By Browser. This one has everything. Clips from the main browsers of all of the above methods, plus all five size setting from the three IE PC's.

By Method. This is useful for looking for anomalies.

IE PC. Grouped by the three IE PC's five size settings. Also good for looking for anomalies. There's a couple of subtle ones.

Individual Methods. Because I was going snow-blind trying to see things on the big chart, I thought it would be nice to have them on individual pages too. Source for the screenshots is linked through here as well.

---

Conclusions? For me, yes: take a look over here for the method I currently use.

Owen Briggs © 2002.

Last updated: 31 Dec 2002