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