I've seen theories around the interwebs for solutions to the cleartype issues with Chrome, Opera, and IE7-8. IE9 and Firefox ignore a user's preferences for cleartype, so I was wondering if there was a way to force a website's fonts to display as anti-aliased for each user visiting? I've tried hidden text-shadow, -webkit-font-smoothing, a little extra text-stroke, and more, all to no avail. Help?
No, you can't force browsers to render text with anti-aliasing, especially if they've chosen to respect the user's preference to not anti-alias text.
Related
I see this question has been asked in different ways but perhaps not in such a direct manner. I'm on a fresh load of Windows 8.1 with a default setting of ClearType Disabled. Web Fonts render perfectly fine in all browsers except for Firefox. In Firefox, they appear blurred or pixelated. When I enable ClearType they suddenly are fine in Firefox. Oddly if I then disable ClearType and logout and then login, they are still fine. I see that Google Chrome previously had a similar issue but understand they fixed the issue in Chrome. Is this an issue that needs to be addressed by Firefox? Are antialias properties going to be advanced in CSS to possibly force fonts to render properly?
Does the problem reproduce with hardware acceleration disabled?
If it does not, you are seeing this long standing issue1 - DirectWrite font rendering with ClearType disabled sometimes does not work correctly when using hardware accelerated drawing. As far as I know there are no font-rendering related changes in Firefox 32 (you didn't clarify if this is a regression versus Firefox 31 or you only just noticed this problem), but there are changes that extend the use of hardware-accelerated drawing.
Note that there is a difference between disabling font smoothing and disabling ClearType. If it works correctly in Chrome, that might be the issue, because Chrome has the directly opposite bug such as not respecting the settings2 correctly3.
v32 appears to have botched font rendering - with v31, WOFF and other font types render perfectly, whereas in 32 they are missing portions of the glyphs.
I've got a fancy css neon effect on a navigation. This works perfectly on any major browser except on IE < version 10.
The problem is that there is no text shown on IE 8+9.
I have no Idea where to start with a fix so I would be very grateful for every tip.
It doesn't need to be working with IE8, IE9+ would be fine.
The effect can be found on the page http://www.arch-on.ch/team/philosophie/
Many thanks in advance for any helpful input
CSS property text-shadow is not supported by either browser (IE8, IE9) and box-shadow is only supported by IE9
You best solution is just not to have the glow effect in those early browsers and give users of those browsers a warning that the site looks better in a modern updated browser.
To achieve what you want in those browsers you would have to create transparent png images and swap them out on :hover. But this because real messy (especially when you have to keep adding new text or change text) and is not efficient.
Do not create more work for yourself with something that just applies to aesthetics.
Try Quirksmode for before: and after: content: http://quirksmode.org/css/user-interface/content.html
There is also a plugin called CSS3Pie that "makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features". Maybe implementing this is okay for you. http://css3pie.com/
Otherwise you have to avoid using CSS3 if you want to go down to IE8. Check this chart for browser compatibility of CSS3 statements:
http://www.normansblog.de/demos/browser-support-checklist-css3/
Cheers
Frank
I've been working on a website and I can't get to make the text look anti-aliased when it's size is small on all the browsers.
I Can see the best results in Safari and Firefox, however, in IE and Chrome the text is anti-aliased in a bad way that it looks thicker than needed.
I've tried all the anti-aliasing solutions I have found but none fits my need.
For some reason IE9 renders Arial font bolder than other browsers such as: IE7, IE8, Chrome, and Firefox. I have looked for the reason in the CSS but couldn't find anything wrong.
Another thing that happened is that I had word-spacing of 1 or 2 pixels in most of my website, but IE9 showed it too wide, so I made conditional css for it with normal word-spacing.
You can see the difference in the attached screenshot, and also find it in this temporary link:
http://pat.co.il/shirg/matanuziel.com/
Any ideas will be appreciated.
Thanks
The problem is the browser, not your site.
Internet Explorer 9 uses sub-pixel positioned ClearType to render text by using DirectWrite. This can cause rendering differences compared to other browsers and is expected behavior. It can cause text to blur slightly more, just as you're seeing.
As a side note, you should consider using TypeKit if you want to use non-standard fonts and have them render (resonably) well for all users. Note that there will still be minor rendering differences across browsers, probably on the same order of magnitude as what you're experiencing here.
And as Alan stated, using normalize.css is a good idea.
It might be worth looking at normalize.css. I don't know if it'll address your specific issues, but I've found that it's a nice starting point.
Should i check in all? or in any one is enough because all share same rendering engine Webkit.
My question is related to HTML CSS rendering.
I know one difference Safari for windows and MAC both have Font smoothing (anti -alisaing)
Is there any other differences?
There's definitely a difference between Chrome and Safari due to Safari's font rendering. In Safari text tend to be a bit bolder due to the anti-aliasing algorithm and can sometimes take up a few extra pixels on the screen.
Also keep in mind that Safari uses the SquirrelFish javascript engine while Chrome uses V8.
I have found a difference in the way Safari and Chrome select SELECT boxes. I think Chrome seems to ignore line-height whereas in Safari line height seems to make a difference.
Safari Windows 5.1.7 v's Chrome Windows Version 22.0.1229.94 m
I think this is to do with the default user agent style?
I would check, yes.
Whilst the browsers all use the same rendering core, they're not necessarily on the same version (and there are multiple versions of Safari out there in any case).
Also, as slebetman says, font rendering is quite different depending on OS and anti-aliasing settings too, so you need to be aware of that.
Shadows are fast&ugly in chome; slower&prettier in safari (and firefox). IIRC there was some difference in CSS3 transitions too - but really, these details are still in flux anyhow and change from version to version.
In practice, I only check one of the two regularly, which is generally fine. Before putting major changes online, it's obviously not a bad idea to check again, but during development, it's not worth the hassle; they're so similar anyhow...
There are major and minor differences. Do check!
Minor: full support for CSS3 border-radius in Chrome. I've read about, but can't find, this in Safari.
Major: zooming in Chrome zooms everything. (This is the behavior in almost every browser.) Zooming Safari zooms text but leaves other things unchanged. Your ever-so-carefully-laid-out form is highly likely to be trashed if the user zooms in. Leave lots of extra space.