I am hoping some of you css wizards might have run into the problem I'm about to describe.
I've created css3 buttons for a clients website, in order to replace their current image buttons. The buttons happen to be a light font face on a dark value background (white text on a red background).
On OSX and iOS, the quartz rendering engine kind of freaks out about this, and anti-aliases the font to death. Bold become really really really bold.
The strange thing is, I develop on a Mac, and cannot replicate the rendering problem the client is having across multiple devices. I've made sure I only have system fonts enabled, that my font smoothing is set the same, etc...
I found an article that suggested a fix for webkit based browsers here, and have seperated the text from it's background in order to give just the text an opacity value.
Still, no dice. Anyone have idea what could be the problem here?
Sample image:
I've encountered bolding issues with web fonts on webkit based browsers. I used the following CSS property to remedy it:
-webkit-font-smoothing: antialiased;
Seems like a better solution than messing with opacity to fix font weights... which really just feels like a hack.
Related
Here's a recurring problem I've had.
I love using a dark theme for my Windows 7 computer. Unfortunately, the only way to get a really dark theme is by choosing the "High Contrast Black" color style, even though I don't really want high contrast, just darkness.
My theme works great, except that once in a while, there's an app that shows terrible colors because of it. Chrome is one example. I managed to fight that off using the Forced Colors setting, but that setting may be removed in the future, and then I'll be in a big problem.
I'm guessing that each app has some kind of API to ask the operating system about the theme colors. Is there any way to intercept that call and change the data, so specific apps will think that I'm on a non-high contrast theme?
Other ideas and solutions would also be interesting to hear.
I have a simple status bar app using NSPopover that I'd like to support Mojave Dark Mode. If I use the recommended semantic colors it looks fine in most cases light and dark, unless there's a bright window behind it, in which case the window transparency makes everything look washed out and the one image looks horrible. It looks great if I turn on the system prefs "Reduce transparency". Is there any way to get the no-transparency mode on a per-view basis? I've looked at the vibrancy and alphaValue properties with no success.
I know I can use hard-coded colors for everything and detect dark mode programmatically, but that's exactly the design I'm trying to get away from in switching to semantic colors. I suspect if you're going with the OS theme then you take what you get, I just don't like the OS's choice in this case.
I'm sure this has been discussed before, but I can't find any canonical question / answer.
Currently, IE9 and Firefox 4+ both use different font rendering that produces (for some) more blurry fonts but overall better kerning and more consistent results. Also, it renders non-standard fonts on Windows much better. I've have not done a thorough investigation, but I think it has to do with the fact that both IE9 and Firefox use now a different graphics layer which in apparently renders fonts differently. Also, the reason some of the standard fonts such as Arial, Tahoma etc. look in Firefox the same as 10 years ago is that it actually has a list of exceptions for them (look for gfx.font_rendering.cleartype_params.force_gdi_classic_for_families).
So far so good. The problem is Chrome. It still uses the old font rendering that makes the non-standard fonts practically unusable. Just for illustration, the font I had in mind was: http://www.google.com/webfonts/specimen/Play. Just open the sample in Firefox/IE9 and Chrome and you should see the difference. Is there anything I can do? Or should I look for a more optimized font.
Update: I see it's a common problem: the headings on http://www.smashingmagazine.com look very jaggy in Chrome.
Update: Sample image:
I have read that Chrome (originally Chromium) has anti-aliasing issues that's why it's jaggy.
Using font-faces also makes a difference than using local fonts in your system. So, all we can do is just wait until they fix this issue or help the Chromium Project if you can.
Known issue. You can try gdipp or MacType.
Copying my anwswer from Making CSS3 #font-face font rendering play nice with ClearType on Windows
A similar question here: Font-face embedded fonts look fuzzy in Windows 7 browsers got an answer that solved the same issue for me.
The fontsquirrel font generator http://www.fontsquirrel.com/fontface/generator optimizes fonts and adds them with hinting/rendering info that helps the windows font rendering engine render them better. It also generates smaller files, which will download faster.
I've got a Wordpress site with some CSS3 rules applied to some images that rotate the images and have a hover effect on rollover too. Problems are showing up in Safari & Firefox when you hover on and then off these images and I can't seem to locate any similar issues by people on the Interwebs.
See http://tinyurl.com/3n2eude and hover on and then off the images (the slightly rotated ones):
Member name goes blurry and then back to normal (Firefox)
Member image border becomes jagged (Firefox)
A big black line displays to the side of the member images sometimes when you hover back and forth between two member images (Safari)
If I disable the transform:rotate rules, it's all fine. So seems to be an issue with that rule. Just can't work out how to get around it.
Anybody got some ideas on how I could get around these or what might be causing it?
Thanks for any ideas you might have!
Bit old of a question but that problem is related with rendering on browser (from what I understood). It cannot be fixed on CSS/HTML side. It must be fixed on user side.
Fix: http://www.askvg.com/how-to-enable-direct2d-directwrite-hardware-acceleration-in-mozilla-firefox/
More information about problem: CSS3 rotate - rendering problems in Firefox and Safari
We haven't found anything anywhere so far about that very strange effect.
For some time (don't know since when exactly), the capital S letter renders in Windows browsers like it's been moved by one or two pixels to the right. This happens on many browsers, not just on my system, so our customer wants it repaired. It's not a question about local Windows configuration but about browser rendering.
It can be seen here: http://www.holcimfoundation.org/T154/holcim_awards.htm
Here are some facts:
On Mac, Linux, Android and Windows with ClearType switched off the effect doesn't occur
If zoomed in (CTRL+ on Firefox), the effect gets smaller and then disappears
It doesn't happen on every website, just a few - I believe I've seen this elsewhere too (but didn't keep the URLs)
We believe that this is a bug in the Windows font rendering engine. Does anyone have any idea why this happens? Or what kind of workaround we could use?
On Mac, Linux, Android and Windows with ClearType switched off the effect doesn't
I'm not much of a ClearType wizard on Mac, Linux or Android but in Windows you can tune it.
If zoomed in (CTRL+ on Firefox), the effect gets smaller and then disappears
To me this indicates that the text path is being rendered correctly but at 100% with so few pixels to work with the "mapping" is wrong. Do you have a problem with this at 72pt?
We believe that this is a bug in the Windows font rendering engine
Do you have a reference rendering to compare this bug to? For all intents are purposes it could be by design, or your ClearType could be misconfigured.
EDIT:
I looked at this using the "Inspect Element" feature of Chrome. It seems you are trying to do too much with only 10 pixels of character real estate.
Observe the style and the rendering before:
Now take bold off:
Looks like it's not a bug, ClearType is doing the best it can with only 10 pixels.