Hi poppyrich,

sorry bit late to the party on this one, but I happened to be searching for the some related stuff..

there a few suggestions out there for a font element reset, and yes IE's CSS Expressions is one way to go. AS for other browsers it's not required, and it would be very very easy if IE supported the inherit value ;)

font { /* size, color, face */
color:inherit; /* Non IE browsers */
font:inherit; /* Non IE browsers. Opera used to have bug with font-size? */
font-size:100%; /* All browsers including IE . this would work for Opera's bug too */
}

font-size, should be covered by the all encompassing

font: inherit;

rule, BUT I read that Opera 9 had a bug where it didn't pick up the font-size, however declaring the font-size to be 100% will mean that it becomes 100% of its parent and is effectively reset to 'normal' overrding the size attribute. This works for IE too so, your function if just for size is probably not required? - that only leaves the

color

and

face

attributes to deal with for IE, for a 'proper' reset.

The expression I found that seems simplest to implement is:

font {
color:expression(this.parentNode.currentStyle['color']);
font-family:expression(this.parentNode.currentStyle['fontFamily']);
}

disclaimer: probably best inside a conditional comment fed to [lte IE7] (though not sure if 8 gets 'inherit' yet ;)

Some say that constant evaluation of IE expressions affect the performance of IE. I've read conflicting reports about whether constants continue to re-evaluate every time a mouse/scroll action is taken (and I don't know how to test!) - but to me the two rules above are both constants and should not need to re-evaluate becasue there's no counting to do - (perhaps someone else could clarify this authoratively?).

Anyway if worried about the performance or if noticeable lag is found then writing a small function (like yours above) would be the way to go for color and family.. font-size: 100% would appear to be good enough for all browsers, and they don't require a loop through because of the inherit overrides, which should hopefully also work for IE someday

Thanks for the input.
You're right, just putting a CSS rule of any kind (like font-size:100%) will override the size attribute on the font tag.
Same for font-family (face) and color (color).
All the expression is doing is a reset of some kind to 100%. The expression I posted does not work for face, or color.

The same holds true for inline styles.
This size "2" font tag: <font size=2>#*$!X</font> can be overridden by this: <font style=font-size:20px; size=2>#*$!X</font> which will display as 20px.
I also found that the behavior of the font tag's seven size attributes (1-7) are identical to the seven font-size keywords in the CSS spec. This means that, via one of the newer CSS attribute selectors, the size could be controlled via CSS rather than inline with the size attribute.
Like:

[size="1"]{font-size:xx-small} or [size="7"]{font-size:xx-large}

I once read a quote from a well-known product development engineer at HP, I believe, who said, "Getting it wrong is a part of getting it right." I always try to keep that in mind. Client side development can be maddeningly frustating.

The grail I was after in playing around with this was a way to detect the computed size of the font within the font tag at a selection of 'Medium' in IE's Text Size menu. [bold]Even if the actual selection is Larger or Largest. Or Smaller or Smallest.[/bold]
I was looking for a way to "freeze" the text at a simulated Text Size selection of Medium but it's really impossible because the whole point of font tag sizes and font-size keywords is to provide scalability without inheritance.
It boils down to a math problem, mostly, I think. And perhaps there's a correspondence between the scaling that the keywords or size attributes do (seven values) and the five different selections in the Text Size menu.

Not my most pressing problem these days but I'll explore it further as time allows soon. Just one of those oddball mysteries.

CSS guru Eric Meyer has a set of diagnostic stylesheets on his blog and one of them is called fontpop which, in his words:
"Draws attention to any font elements on the page... Also selects elements that descend from font elements in case you have one of those pages where a font is wrapped around three paragraphs or something."
So at least someone else (and someone a whole lot better than me) has found the need to create a tool to seek out and deal with font tags lurking in the shadows of a page.

That claim to as much relevance as I can muster stated, here is a revised method for freezing font tags at their size "Medium" computed sizes. It works.

1) Any font tag that includes a size attribute (size=3, for example), as well as any elements enclosed within them, will return that same value as a string when queried with currentStyle.fontSize.
You'll get "1", or "2" and on up until "7", depending.
(Strangely, if that were translated into a style sheet rule, font{font-size:3;}, IE would interpret that as a font-size of 3px and that would not be helpful in any way.)

2) In quirks OR standards mode the seven CSS font-size values corresponding to the seven size attribute values for the font tag - at a selection of "Medium" in IE's Text Size menu - are:

1=10px
2=13px
3=16px
4=18px
5=24px
6=32px
7=48px

Of course the computed size - offsetHeight and width measurements - will vary with the font-family but that's normal and expected.

3) These things being the case, the following javascript function and IE CSS expression will freeze the size of any elements enclosed in font tags:

<script>
function setFontags(x){
var y={1:10,2:13,3:16,4:18,5:24,6:32,7:48};
return y[x]+'px';
}
</script>
<style>
font{font-size:expression(setFontags(this.currentStyle.fontSize));}
</style>

With this, the sizes of font tags and descendant elements will be as frozen as any other elements on the page set in pixels or points but frozen at their intended "Medium" sizes.

In my tests, I can't discern any performance hit from this technique, but always test.

Lastly, I had absolutely no result in attempting to manipulate font tags using attribute selectors - ([size=3]{font-size:16px}, for example).
Firstly, these selectors are not available in Quirks mode in IE7 and secondly, even in Standards mode they just didn't do anything - perhaps an intentional thing on the part of IE's developers, who knows.

That's a handy favelet for debugging, thanks for sharing

I hadn't noticed that [size="3"] didn't work in IE, have only written custom sheets for use in FF/Opera as their support was always better.

strangely IE7 does support attribute selectors and does recognize [size] but not any of the operators (^$~*=), it seems to support them on most/all other attributes properly though - so perhaps you're right and this is deliberate!

There's no advantage to using [size] over font {font-size: 100%;} for a total reset :( but still can't gain control if you actually still want to use the font-sizes to retain the 'style'.

thanks again for sharing your findings poppyrich :)