Question

I want to scale down my fonts for the mozilla browser by say, 10%.
So I have the following code in my stylesheet:

body{   font-size: 62.5%; }
@-moz-document url-prefix() {
    body{   font-size: 56.25%; }
}

But for some reason, it doesn’t seem to do anything.

Changes on individual divs work fine though.
Example:

#footer-links{  font-size: 1em; }
@-moz-document url-prefix(){
    #footer-links{  font-size: .9em; }
}

I will probably just end up doing this for all divs then…
But I’m just puzzled why the body setting above isn’t working.

EDIT:

I’ve also just tried with the html tag:

@-moz-document url-prefix(){
   html{    font-size: 56.25%; }
}

Although this does rescale the font, it’s not to the size specified, but to much smaller than the original.

Answer 1

Thanks for the fiddle.

rem units are root em. That is, they’re in terms of the font size of the root element. Which in HTML is html, not body. So changing the font size of body doesn’t change the size of a rem.