i am noticing in my web app that the same input form font size, currently set to 17px, reads smaller on chrome compared to firefox. i've attached a screenshot.
is there a more elegant method to resolve this than simply using
/*chrome*/
input {
font-size:17px;
}
/*firefox*/
#-moz-document url-prefix() {
input {
font-size:15px;/*reduce font size to match what is seen in chrome*/
}
}
I don't know what font you're using (or platform (Mac vs Win makes a difference too) , but some browsers render fonts using CLEARTYPE subpixel rendering, some use QUARTZ subpixel rendering (making appearance differ), then others use standard antialias-ing.
A good way around this is to use font-smoothing css in your html or body css:
html {
font-family: /*yourfont*/;
-webkit-font-smoothing: antialiased;
}
Read more about it and see more examples on Max Voltar's website
Also note that using em is preferable to using px for measuring your font. Large font sizes are especially harmed by pixelation if you don't use font smoothing, so in order to keep accessible text especially, it's better to use ems (this way you can still use large type sizes).
I am currently working on a reponsive css webdesign and have a few sprites for different button states.
In this case I've tested the webdesign in Firefox, Opera, IE (compatibilty starting from IE8), Chrome and Safari and everything is displayed correctly. The website has been tested under different cell phones and tablets with different browsers without any problems.
I'm in the final testing stages and having co-workers see how the website looks in different resolutions... A friend who owns a macbook pro is the only one who encounters this problem and only under safari which makes it difficult for me to target and solve. I have tried to reproduce the problem using his screen size and switching safari's mode to that of a mac user without success.
The code is the following :
.buttons-menu .btn .rules, .buttons-menu .btn .contact , .buttons-menu .btn .tickets , .buttons-menu .btn .profile { display: block; width: 143px;height: 32.5px;padding-top: 37.5px; background-size: 100% 300%;}
.buttons-menu .btn .rules {background: url(../images/sprite-button-03.png); background-position: 0 -100%;}
The problem is that this tester sees about 2 pixels of the second part of the sprite when he shouldn't and this only in safari.
Thank you for reading this.
EDIT : SOLUTION : As ralph.m thought, the problem came from the rounding of the decimals in safari that didn't always behave the same as in other browsers.
Avoid using values like .5px. The browser will have to round that up or down to a whole number, and you don't know which way it will go.
font-variant: small-caps;
font-size: 12px;
Firefox:
Capital letters: 12px
Lowercase letters: 10px
Chrome:
Capital letters: 12px
Lowercase letters: 8px
How to harmonize that without using JavaScript?
Webkit browsers display small-caps smaller than other browsers so.. You can use CSS media queries to easily sniff out webkit browsers like Chrome and Safari. Try something like this:
#media screen and (-webkit-min-device-pixel-ratio:0) {
.some-element-using-small-caps {
font-size: .85em
}
}
You can target the browsers individually by using css hacks like this:
#-moz-document url-prefix() {
//firefox specific css here
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
//chrome specific css here - this will also hit other webkit browsers like safari tho
}
A nicer way however in my opinion involves a tiny bit of javascript that detects the browser and sets a class on the html element and then you can use that class as a base for targeting the individual browsers.
in the end it would look something like this:
<html class="firefox">
...
</html>
.firefox .rulename {
//firefox specific css here
}
and of course the same for chrome and whatever else browser
I am having a similar issue with a much weirder issue between Safari on iPad vs Safari on Desktops, showing a different scale for small-caps at 16px. For some reason small-caps is a bigger size on iPads, kinda matching that of Firefox.
Adjusting the font size or letter-spacing a half pixel less or so, can mitigate the issue without further additional hack. By essentially finding a tiny middle adjustment which trigger on one browser but not on another, to try and get as close as possible.
What I have observed for Firefox and IE, is that fonts tend to scale with many more intermediate sizes than that of Webkit. For example, in IE and Firefox, 15.6px is a tiny bit bigger or use more tracking to adjust, than that of 15.5px, and so is 15.7px, 15.8px etc. With a difference for nearly every 0.1 pixel. Whereas in Safari the difference is only perceived for every 0.4px or so.
For my small-caps case here which created an overflow issue, I used 15.5px, which is barely different from 16px on Safari (Desktop), yet bring down the small-caps size for IE and Firefox as close as possible to Safari's.
I have a website which uses CSS for all of its styling, and in Windows, the line-spacing and font sizes are all consistant accross Firefox, Opera, IE, Safari, Chrome.
I have just tried it under Firefox on the Mac (Snow Leopard) and whilst the fonts generally look a little more bold than on windows, the general sizing looks about the same.
However, in Safari on the Mac, all of the fonts appear so much smaller, line-spacing is much tighter also.
What is the likely cause of this? Is it a known scenario, perhaps with a nice workaround?
If you would like to check the situation, the site in question is:
http://www.marcusstarnes.co.uk
Thanks
Since you set font-size in em (a good thing - don't change that!) the font-size depends on the browser settings / user preferences. You've probably got a smaller font set on Safari.
On the other hand, if you are in the "all browsers must look a-like, or the world will end" camp, then you shouldn't be using ems.
I'm unsure about the line-height: 1 in the reset style sheet. That just seems wrong to me...
EDIT:
Oh wait, I just discovered font-size:62.5%;. Doesn't change what I said, but that is uncomfortably small for many, because you are using two thirds of the users preferred size.
I know this is an older post, but I recently ran into the same issue. The only browser I was having trouble with was Safari on Mac. What I ended up doing to resolve the issue was change my reset from :
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
to
html { font-size: 16px; overflow-y: scroll; -webkit-text-size-adjust: 16px; -ms-text-size-adjust: 16px; }
This just forced the browsers to all use the "medium" font size and then scaled it from there. The only reason I am adding this is because there really wasn't an answer given. Hopefully this will help someone that comes across this.
Recently a client has complained about the appearance of a system font in IE6. Basically th issue is that IE6 doesn't support font-smoothing/anti-aliasing (I know you can turn it on in an OS setting or something). But someone threw out this gem:
"You can force font anti-alias in css by using pt instead of px."
I did a quick POC in various browsers and saw no difference. I found one reference to it online, last post on this forum:
http://www.webmasterworld.com/css/3280638.htm
This sounds like the equivalent of a web developer urban myth, my feeling is it's BS. Has anyone ever encountered it?
Oh yes you can:
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;
Source for Firefox, thanks Justin for the heads up.
There's these exciting new properties in CSS3:
font-smooth:always;
-webkit-font-smoothing: antialiased;
Still not done much testing with them myself though, and they almost definitely won't be any good for IE. Could be useful for Chrome on Windows or maybe Firefox though. Last time I checked, they didn't antialias small stuff automatically like they do in OSX.
UPDATE
These are not supported in IE or Firefox. The font-smooth property is only available in iOS safari as far as I remember
No, there's not really any way to control this as a web developer.
Small exceptions are that you can do some fake forcing of anti-aliasing by using Flash through sIFR, and some browsers won't anti-alias bitmap/pixel fonts (as they shouldn't, more info: Anti-Aliasing / Anti-Anti-Aliasing).
Also, as Daniel mentioned, it's ideal to be using em units for all fonts, see The Incredible Em & Elastic Layouts with CSS for more information about this.
I found a really awkward solution using the zoom and filter ms-only properties
Example (try with no aa, standard and cleartype):
http://nadycoon.hu/special/archive/internet-explorer-force-antialias.html
How it works:
-zoom up text with zoom:x, x>1
-apply some blur(s) (or any other filter)
-zoom down with zoom:1/x
It's a bit slow, and very! memory-hungry method, and on non-white backgrounds it has some slight dark halo.
CSS:
.insane-aa-4b { zoom:0.25; }
.insane-aa-4b .insane-aa-inner { zoom:4; }
.insane-aa-4b .insane-aa-blur { zoom:1;
filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=2);
}
HTML:
<div class="insane-aa-4b">
<div class="insane-aa-blur">
<div class="insane-aa-inner">
<div style="font-size:12px;">Lorem Ipsum</div>
</div></div></div>
You can use this short jQuery to force anti-aliasing, just add the ieaa class to anything:
$(function(){ $('.ieaa').wrap(
'<div style="zoom:0.25;"><div style="zoom:1;filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=2);"><div style="zoom:4;"><'+'/div><'+'/div><'+'/div>'
); });
Adding the following line of CSS works for Chrome, but not Internet Explorer or Firefox.
text-shadow: #fff 0px 1px 1px;
I disagree with Chad Birch. We can force anti-aliasing, at least in Chrome using a simple css trick with the -webkit-text-stroke property:-
-webkit-text-stroke: 1px transparent;
I say its a myth.
The only difference I've found between pt, px, and percent based fonts is in terms of what IE will scale when the Menu > View > Text Size > ?Setting? is changed.
IIRC:
the px and pt based fonts will NOT scale
percent based fonts scale in IE just fine
AFAIK:
The font anti-aliasing is mostly controlled by the windows setting for "ClearType" or in the case of IE7/IE8 the IE-specific setting for ClearType.
I think you got it a bit wrong. Someone in the thread you pasted says that you can stop anti-aliasing by using px instead of pt, not that you can force it by using the latter. I'm a bit sceptical to both of the claims though...
The px to pt fix worked for me on a site that uses a font from Google Web Fonts. On Win7 - IE8 it correctly fixed the lack of anti-alias rendering.
Using an opacity setting of 99% (through the DXTransform filters) actually forces Internet Explorer to turn off ClearType, at least in Version 7. Source
Here's a nice way to achieve anti-aliasing:
text-shadow: 0 0 1px rgba(0,0,0,0.3);
I doubt there is anyway to force a browser to do anything. It would depend on the system configuration, the font used, browser settings, etc. It sounds like BS to me too.
As a note, always use relative sizes not PX.
Seems like the most exhaustive solution can be found at http://www.elfboy.com/blog/text-shadow_anti-aliasing/. Works in Firefox and Chrome, although Firefox is not quite as effective as Chrome.
As a side note, Gecko and WebKit support the the
text-rendering
property as well.
Not a pure CSS but natively supported method without any font replacement hacks:
Simply convert your font to SVG and place it higher(before WOFF or TTF) in #font-face order. Voila! Fonts are smooth now, because they're no longer treated as a font but an SVG shape which will be nicely smoothened.
Note: I noticed that SVG can weight more than WOFF or TTF.
I found a fix...
.text {
font-size: 15px; /* for firefox */
*font-size: 90%; /* % restart the antialiasing for ie, note the * hack */
font-weight: bold; /* needed, don't know why! */
}