Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Font-size issues comparing chrome and Firefox

I built a site and the problem is, chrome display font-size 1px bigger than Firefox. I tried several ways to match the font-size, specified it in px, in % set the body to 100% and then the elements to 0.875em. None of those work. It stills display 1 pixel greater in chrome.

This is the code I'm using for font-sizes:

body {   font-size: 100%; } * {   margin:0;   padding:0;    text-decoration: none;    font-family:helvetica, arial, sans-serif; } #geral {   width:1000px;    margin:0 auto;    position:relative;    font-size:0.875em; } 

Where the #geral wraps the entire site and there is no other font-size statement on the CSS, the source can be viewed in the link I posted.

I wonder if there is a way to fix that or if I'll have to specify different font-sizes for each browser?

like image 532
Iberê Avatar asked Feb 04 '11 15:02

Iberê


People also ask

Why does my font look different in Firefox?

Chosen solution You can check in the Rules tab in the right panel in the Inspector what font-family is used for selected text. You can check in the Font tab in the right panel in the Inspector what font is actually used because Firefox might be using a different font than specified by the website.

Why do fonts render differently in different browsers?

If you notice that your text fonts look different on different browsers, it is because different browsers and devices use different rendering engines, and therefore may result in minor differences. Sometimes these minor differences can have a domino effect.

Why is text so small in Firefox?

Open Firefox, and click on the hamburger menu icon in the top right corner of the screen. Look to the Zoom section of the menu. Click on the minus (-) icon to reduce the font size to a minimum of 30 percent. Click on the plus sign (+) to increase the font size to a maximum of 500 percent.


2 Answers

I suggest you use a CSS reset like the one from YUI. It will make your pages much more consistent across all browsers, including font rendering. It makes the biggest difference with IE and the other browsers, but it gets rid of all manner of inconsistencies.

like image 141
Surreal Dreams Avatar answered Sep 25 '22 15:09

Surreal Dreams


Fwiw at this date, I myself have just recently learned that good CSS-coding practice is to define absolute font-size only for the HTML or BODY element, and to define all other font-sizes relatively, that is, in terms of this size (i.e., using em or %).

If you do that, you only need single out webkit browsers (Chrome, Safari) from the others (Gecko, IE, etc.). So, for example, you might have defined in your stylesheet,

body {   font-size: 16px; } 

Then at the bottom of the stylesheet, you can include this

@media screen and (-webkit-min-device-pixel-ratio:0) {    Body {     font-size: 20px;           } } 

(See also Chrome conditional comments)

This works for me. But one side-effect is to also rescale any non-text elements that are sized relatively, and this may or may not be desirable.

like image 42
JohnK Avatar answered Sep 25 '22 15:09

JohnK