I'm reporting this on behalf on an anon who posted it on
http://www.mediawiki.org/wiki/BadFontSize while bugzilla was down.
The monobook theme use a base font of x-small, then enlarge the font back to
127%. The result is a font which is NOT the user specified font in the browser
preferences, and is too small to read. Impossible to fix with a general user CSS.
https://www.mediawiki.org/w/skins/MonoBook/main.css:
/* Font size: ** We take advantage of keyword scaling- browsers won't go below 9px ** More at http://www.w3.org/2003/07/30-font-size ** http://style.cleverchimp.com/font_size_intervals/altintervals.html */ body { font: x-small sans-serif; /* @embed */ background: #f9f9f9 url(headbg.jpg) 0 0 no-repeat; color: black; margin: 0; padding: 0; direction: ltr; /* Needed for RTL flipping */ unicode-bidi: embed; } /* scale back up to a sane default */ div#globalWrapper { font-size: 127%; width: 100%; margin: 0; padding: 0; position: relative; z-index: 0; }
The problem here is that x-small * 120% is NOT a sane default. There is only one
sane default, which is 1em - the font size defined in the user browser.
Browsers let you have your own CSS, which make it possible to fix bad sites css.
This CSS works for me on most sites:
html, body { font-family: Arial !important; font-size: 1em !important; line-height: 1.25em !important; } input, select, textarea { font-size: inherit !important; font-family: inherit !important; }
This CSS does not fix monobook correctly, because I get 120% * 1em font size,
which is too big.
Reference:
- http://www.w3.org/QA/Tips/font-size
- http://moinmoin.wikiwikiweb.de/ MoinMoin got this right