ULVEN
ULVEN

CSS: Specifying different font size for Google Chrome


03 December 2012 — CSS, Web Design

When using the @font-face property, I’ve found that certain font types are rendered smaller in Google Chrome (and Opera, to a lesser extent) than in Firefox. I don’t know the reason, and I’ve only experienced with certain font types only. It is possible to fix this with media queries by specifying a different font size for Webkit-based browsers like Chrome.

The first step is specifying absolute font size values for the HTML and/or BODY element only, and specify all the other CSS elements relatively, with either .em or %, if this was not done before. With this in mind, instead of defining relative font sizes in out HTML/BODY elements, we define them as we did a few years back:

ulven-icon-css3 ulven-icon-chrome
body {
font-size: 14px;  
}

Then, we specify a media query that will only apply to webkit browsers:

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

Doing so, we single out webkit browsers (Google Chrome, Safari) from the other ones. All of the other CSS elements are though defined with relative font sizes, like so, for example:

p {
font-size: 0.85em;      
}

If the problem is like mine, it suffices to test which font size value in Chrome corresponds to that of Firefox. Hope this helps.


TAGS: , , , , .

Related Posts




Leave a response


Fields marked with * are required. Email addresses are never shared.