HTML & CSS
I saw this in a 2006 blog post about Vista fonts being undersized. The writer posited this as a possible workaround for size differentials:
font-family: Calibri, 'Lucida Grande', Verdana, Arial, sans-serif;
[highlight="Possibly Wonky CSS"]font-family: 'Calibri'-120%, 'Lucida Grande'-100%, 'Verdana'-96%, 'Arial'-101%, sans-serif;
Not disputing the guy's percentage choices per se, but I am uneasy about the entire concept behind this. He calls it a quick and dirty CSS hack. I'm not sure what to think. Is this a brilliant workaround that isn't widely considered, or is it a train wreck waiting to break our designs?
I've personally never heard of this work around, or the fact that the Vista fonts are indeed smaller!
I will be looking into this and conducting some testing of my own.
From what I can tell, reading the article, he was suggesting that browser manufacturers could implement a system whereby fonts could be individually targeted with sizes, and this was simply one example of how it could work - it was not intended as an example that could currently be used.
I believe font-size-adjust was spposed to address this problem to some degree.
It was in css2 but removed in 2.1 but [proposed now for css3. I think only Firefox [URL="https://developer.mozilla.org/en/CSS/font-size-adjust"]supports it](http://www.w3.org/TR/css3-fonts/#font-size-adjust) at present.
font-size-adjust is the central issue of this thinking process. I agree with Stevie also, I can't see this alone as being workable in current CSS, though I do believe that the article suggested this as a CSS "hack."
The best solution would be (and forgive us if this already exists, we couldn't find it) to give a percentage height to each font, so instead of a CSS segment that used to look like
font-family: Calibri, 'Lucida Grande', Verdana, Arial, Sans-Serif;
One could implement a CSS hack that provides per-font size scaling, a quick and not-too-well-thought-out example being:
font-family: 'Calibri'-120%, 'Lucida Grande'-100%, 'Verdana'-96%, 'Arial'-101%, Sans-Serif;
I just don't see how this could work without causing browsers to throw hairballs.
It's supposed to be intertwined if I remember correctly with the font family property, something like a shorthand :).
Though the question I'm wondering is, if using hte percentages will fix vista, won't it screw up others since vista has a problem with smaller font sizes?
Good question. I'm not the expert that Paul or Tommy is, but it just doesn't strike me as something that will work the way the guy says it will.