In my experience, such results are very dependent on the zoom level and font size. For example, if I zoom the linked question one level, then the two fonts are the same size for me. That suggest that this is a font rendering issue, not a configuration problem. Rasterizing an outline font is a tricky business, and it has all kinds of pitfalls related to rounding to the nearest pixel. My suspicion is that the ex-height does not match the pixel grid very well, and that for the bold case, there is something being rounded up and in the non-bold case, it is being rounded down, and that causes the one pixel difference that you are seeing. When the characters are only 8 pixels tall, as in your first example, a one pixel difference is pretty significant.
As for the MathJax output, MathJax tries to match its font size to the size of the surrounding text using the ex-height. Unfortunately, it has to determine that ex-heigh empirically using whole pixels, and in the case where the ex-height doesn't match the pixel grid very well, the estimate of the ex-height can be off, and it can end up over- or under-scaling its fonts. That appears to the be the case here. For example, try zooming out one level and reloading the page. For me, MathJax gets the size better in that case.
So these things are very dependent on the font size, and the zoom level can make a difference to that.
Note, however, that MathJax has a Contextual Menu where you can provide a global scaling factor. (Right click or control click on a typeset equation to get the menu, then choose Math Settings and Scale All Math... to change the value to suit your situation.) That can be used to make the math match better. For the bold, you would need to use a Greasemonkey script or its equivalent to adjust the size of the bold font. I doubt it is worth it, though.
