On my last website, the text is perfect naturally on chrome and firefox without touching font-smoothing or anything else.
But on Mac / Safari 7 the text appears well then turns immediately thinner (too much thinner / not nice to read).
After doing some research [cf http://www.usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/]
and some tests playing with
-webkit-font-smoothing
It looks like Safari display the text first with :
-webkit-font-smoothing: subpixel-antialiased;
Then just after you got the flickering effect, when it is turning font to :
-webkit-font-smoothing: antialiased;
So it seems to me that I had no choice but to force
-webkit-font-smoothing: subpixel-antialiased;
to make my website consistent on all browsers.
I am using font-face Avenir Std Roman.
Some explanations to that Safari problem ?
Any better solutions ?
Could my font be part of the problem ?
Thanks.
So I fixed my problem with applying:
body {
-webkit-font-smoothing: subpixel-antialiased;
}
Now my font is consistent on every browsers.
try both
{-webkit-font-smoothing: subpixel-antialiased;
-webkit-text-stroke:1px transparent;}
Just use this:
link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet"
Instead of this:
link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"
problem solved for me this way!
Using -webkit-font-smoothing: subpixel-antialiased worked a little bit, but there was still too much of a difference between Safari, Chrome, and Firefox. I realized trying to make the font thicker in Safari wasn't going to work, so instead I made the font lighter in other browsers and then used a slightly thicker font weight. What ended up normalizing the font weights across browsers for me is this:
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
Try this:
transform: translateZ(0.1px);
Webkit browsers on Mac has known problem with antialiasing 2d and 3d text elements differently. Giving the 3d property to the element usually fixes the problem.
Related
I'm using icons. On Chrome and Opera they look fine. But if I try Firefox they look pretty blurry if the font-size of icons is lesser than 20px, while after 30px they look smooth. Is there a way to fix this?For example the Firefox problem of images resizing resulting in blurry images can be fixed by rotating the image of a very small amount. Can something similar be applied to font icons?
To see how it looks, just go (using firefox) to any website with icons(like font awesome) and try resizing them to 20px and see how blurry they become.
The problem is coming from the font rendering that browsers use. Different platforms use different methods. Browsers opt to use the OS method or their own implementation.
The reason it looks better in Chrome is because Chrome doesn't subscribe to ClearType on Windows. IE and Firefox both do use it (to check this Start -> Adjust ClearType Text and toggle it on and off to see the difference). But Firefox on Mac and Linux won't use it there because it is a Windows only technology.
Chrome has the upperhand on this particular problem because it doesn't use ClearType it uses DirectWrite on all three platforms. This means that anything should look the same in Chrome no matter what OS you're on.
Why does this matter? Because you're not in control of the user's computer. You cannot force ClearType off, you cannot alter the user's ClearType settings. A user might change their ClearType settings anyway ruining any fine detailing you might do using text-shadow to make it work.
You might get better luck using cufon for this but it's by no means a sure thing.
The solution I'd go for is using images for these icons. That way I'll know for sure that no matter what you're using to view the icons, they will be the same for everyone.
A good fix for OS X is to use the text-rendering and smoothing properties.
body {
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
This also works well when it comes to web fonts.
I have found that occasionally the font-style will be overridden when using google fonts and the font will appear bold. This combo has worked well for me.
.element {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-style: normal !important;
}
Using Google WebFonts ("Oswald" in this case), I have found that my fonts are rendered bolder than they should be. I have solved this problem in webkit based browsers using:
-webkit-font-smoothing: antialiased;
but in Firefox I cannot find the declaration that controls this. I have heard of using a text-shadow hack to fix this, but I would prefer not to use this as it will undoubtedly change the geometric properties of the fonts.
Here is what it looks like in webkit (Chrome):
This is the blocky horrible rendering thanks to Firefox:
I know there is a way to achieve this in FireFox, because I found this font on font-combinator.com, and it renders properly on font-combinator using Firefox. Here is what it looks like on Firefox through font-combinator.com:
After browsing through the css used to create font-combinator, I found this declaration: text-rendering: optimizelegibility;, but this does not work when applied to my element.
I have also tried:
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
font-smooth: always;
font-smooth: never;
font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
How can I get Firefox to antialias my fonts so that they look right when displayed? Can you find the declaration, or combination of declarations that makes them display properly on www.font-combinator.com?
I am using an relatively old version of FireFox (16.0.2) because this machine has an old version of OSX installed.
This is a Firefox on OSX problem only...
I just answered this question: How to antialias SVG text in Firefox with a possible solution form your problem.
I think you could use the following attribute:
-moz-osx-font-smoothing: grayscale;
This will be released with firefox 25 (a nightly build can be found at http://nightly.mozilla.org/)
Have you tried declaring a numerical font-weight instead of just 'normal' or 'bold'? There's a lot of differences in rendering of webfonts in different browsers.
Try setting {font-weight: 400;} for normal text and {font-weight: 700;} for bold.
I'm using the very useful CSS property -webkit-font-smoothing: antialiased in webkit browsers to ensure nice fine text on headlines etc. Is there an equivalent property in Firefox?
Font in WebKit with -webkit-font-smoothing: antialiased:
Font in Firefox:
As you can see the text in Firefox is fatter than in Webkit. Without -webkit-font-smoothing: antialiased, the text looks the same in Webkit as in Firefox.
Firefox 25+ (2013-10-29) supports a new macOS-only nonstandard CSS property -moz-osx-font-smoothing effectively similar to the WebKit’s -webkit-font-smoothing.
So this code should provide consistent results in Firefox and WebKit:
.example {
-moz-osx-font-smoothing: grayscale; /* Firefox */
-webkit-font-smoothing: antialiased; /* WebKit */
}
Problem is -webkit-font-smoothing: antialiased, which disable standard sub-pixel font smoothing.
Try read this
At one point firefox had a font-smooth, but it's been removed and as far as I know is not included at all in the current track. I did some googling and didn't see any indication that there will be any change to that.
As an alternative you could try a workaround like: http://www.elfboy.com/blog/text-shadow_anti-aliasing/.
Firefox has the behavior you're after by default, as far as I know, so there's no need to request it explicitly...
Here's my problem: I'm using font-face for the menu of my website, but Firefox on Mac displays it too bold
On a PC, everything works well, the font is perfectly sized and looks like it should
Unfortunatly, on Mac, i have to had a CSS hack for Safari (which works), but I didn't find anything similiar in Firefox.
I've tried the "text-shadow hack", i tried using the font-weight property (which pretty much doesn't do anything).
And now, some code!
#font-face {
font-family: 'KnockoutHTF48FeatherweightRg';
src: url('font/knockout-htf48-featherweight-webfont.eot');
src: url('font/knockout-htf48-featherweight-webfont.eot?#iefix') format('embedded-opentype'),
url('font/knockout-htf48-featherweight-webfont.woff') format('woff'),
url('font/knockout-htf48-featherweight-webfont.ttf') format('truetype'),
url('font/knockout-htf48-featherweight-webfont.svg#KnockoutHTF48FeatherweightRg') format('svg');
font-weight: normal;
font-style: normal;
}
For Safari:
body{
...
-webkit-font-smoothing: antialiased;
}
Left if FF on Mac and right is FF on PC (the good version)
Thanks!
FireFox posted a resolution to this today on their bug forum. It was just finalized today so won't be in use for a while, but we should all put
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
in our body tag to reset this for all browsers. FINALLY!! man, that made my day! This should come out in the next FF release.
thread here
https://bugzilla.mozilla.org/show_bug.cgi?id=857142
you can use,
font-weight:normal !important;
for fix the visualization error on firefox Mac.
This affects firefox browser ONLY.
#-moz-document url-prefix() {
.classname {
font-weight:normal;
/* or any other option */
}
}
Enjoy!
There is trick explained http://dave-bond.com/css/font-too-bold-on-a-mac/
basically is to apply opacity: 0.99; to those texts...
Every font supports different weights. Some can be really thing, others can't.
Mac and PC will render the same font differently. It's a core operating system thing, and basically, there's nothing you can do about it. :(
Most consistent results can be achieved using something like Google Webfonts or TypeKit.
One of the thinnest fonts standard on Mac is Helvetica Neue.
Also worth noting that font-weight supports values 100,200,...800,900.
I've found that making a slightly "lighter" version of the icons is the best way to compensate for this. They're passable in Firefox, and ever-so-slightly lighter in all other browsers. In Illustrator, I create a 16px icon. I resize it to 1024px, and apply an offset path of -6px (these are the numbers that worked best for me). I then export that as a svg, and import it into IcoMoon to build the icon-font. I don't use -webkit-font-smoothing:antialiased (or the pending -moz-osx-font-smoothing: grayscale) unless it's a light icon over a dark background. This is the best way I've found to get icon-fonts to display (mostly) uniformly across browsers & platforms.
Found this on CSS Tricks and this freaking works.
add this to the stylesheet:
-moz-osx-font-smoothing: grayscale;
I'm using a script that uses Webkit transformations, and in Safari I can see the type jagged, not clear — like in an old pc browser.
The type is good in Chrome and Safari Mobile. What could it be? Do I have to set anything on CSS?
thanks
I am not sure what the problem is... but, you can always force antialisasing with this:
html
{
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
the 'text-rendering' function is optional, it only affects Windows and Linux.
Learn more »