I have a fairly standards compliant XHTML+CSS site that looks great on all browsers on PC and Mac. The other day I saw it on FF3 on Linux and the letter spacing was slightly larger, throwing everything out of whack and causing unwanted wrapping and clipping of text. The CSS in question has
font-size: 11px; font-family: Arial, Helvetica, sans-serif;
I know it’s going with the generic sans-serif, whatever that maps to. If I add the following, the text scrunches up enough to be close to what I get on the other platforms:
letter-spacing: -1.5px;
but this would involve some nasty server-side OS sniffing. If there’s a pure CSS solution to this I’d love to hear it.
The system in question is Ubuntu 7.04 but that is irrelevant as I’m looking to fix it for at least the majority of, if not all, Linux users. Of course asking the user to install a font is not an option!
Sizing/spacing differences are usually difficult to catch. What you can do is create a Linux-specific CSS file that will contain these values adjusted for Linux, then do a simple JS-based detect to inject that CSS if the User agent is a Linux one.
This is probably not the cleanest approach, but it will work, and with the least intrusion into your otherwise clean HTML/CSS.