I have a big problem in css with the font Open Sans
The issue is that I wanna see a phrase in white color with (light) open sans font, instead it appears bold only when using white color ! However when I write the same phrase in black or other color it appears light.
Any ideas ?
here is the code in this link :
http://shrib.com/ILjxuPtM
Test it please, and tell me what's wrong.
Here is an article about font rendering.
CSS color is another factor. Varying contrast between text color and background color can significantly change how type looks. Lower contrast means that anti-aliasing appears more subtle — the graded steps from foreground (type color) to background are less dramatic.
Light-on-dark text tends to look thicker than dark-on-light, so lower contrast makes an even bigger difference in these cases.
I guess you can simply use the font-weight property to adjust the font.
Anti-aliasing on Macs makes light text in Open Sans on a dark background appear bolder. You can adjust the font-smoothing options to something else than sub-pixel to avoid this.
I used Photoshop to stack a layer of dark text on a white background at 50% opacity on top of a layer with the same text, but light on a dark background. As you can see, there is a white fringe around the dark text, which should not be there considering they are equally bold.
Related
I have designed a set of icons in B&W designed to be used on a white background so they are antialiased with different gray pixels. They are very nice so now I would like to use them on a green background but I am not able to "correct" the antialias for the green background. I am quite familiar using paint.net and gimp so I would like to learn how "correct" my icons using one of them.
This is 2022...
In the previous millennium all we had was GIF where pixels were completely opaque or completely transparent, while real edge anti-aliasing requires partial opacity. So you would typically create the image normally with partially opaque anti-aliasing pixels, and then "semi-flatten" it by replacing these partially opaque pixels with fully opaque ones holding the adequate color blend between the object and the intended background. But with modern image formats (PNG and WebP) that support partial opacity this is no longer needed
So:
Open your icon image in Gimp
Make sure it is in RGB mode (Image > Mode > RGB)
Set the Bucket-fill tool to Color erase mode
Bucket-fill the image with the color used for the semi-flattening (white, in your case). Your "gray" pixels should be replaced with the equivalent partially opaque pixels.
So this:
Becomes this:
At that point, if you export your image as a PNG it will be anti-aliased for any background color (and gradients, and patterns...).
If you insist in doing it the old way, you can still use Layer > Transparency > Semi-flatten on that universal image to make sure your image only works on one background:
I would like to draw a cross over an image, with a different color for each pixel depending on the background color, so that the cross is always well visible. So I'm trying to change the Composition Mode of the QPainter, but I can't find an acceptable solution.
I have tried QPainter::CompositionMode_Difference, painting with white. This is quite good because it inverts the destination color, but it doesn't work well if the destination color is a middle gray or similar.
The best solution is to get white if the background is "dark" and black if the background is "light". Is there a way to get this effect using only composition modes of the painter?
What about running the Image Composition Example for yourself, and maybe modifying the source/destination images to better fit your scenario? Maybe QPainter::CompositionMode_Xor is what you want?
An alternative solution, which is even very simple, is to use a white cross with a rather thick black outline. In this case you can ensure the visibility of the cross even in case of rather dark or light background images.
I'm adding CSS to a Bootstrap-based web app, to match a PDF from a designer. There's a button image, whose background color Seashore reports as rgb(0,186,158) aka hsl(171,100,36%). So I set the background colour of the button to match the image:
background-image: url('images/elements/small-search-button-up.png');
background-color: hsl(171,100%,36%);
Only...it doesn't.
Subtracting 3% from the luminosity fixes it:
I'd love to know why. I can't see any obvious causes in all of the other CSS styles applied. This happens in both Chrome and Firefox, on OS X Snow Leopard.
I'm seeing something similar with certain fonts (comparing the web rendered output with a provided PDF), but that cause could be different.
EDIT
Here's the original image. Hopefully SO doesn't process it.
EDIT2
Why use PNG? That's how the designer provided the images. I wasn't aware that there was a trade-off with color space information. Also, I would have thought that PNGs are better for glyphs needing flat backgrounds and crisp edges (compared to JPEGs), no?
It's most likely the color of the PNG image that is not displayed consistently.
A PNG image doesn't have color space information, instead it has a gamma value, and there is a problem to interpret that value to determine a color space. You will probably see that there is a color difference between different browsers, so if you adjust the color for how one browser displays the PNG, it won't match in other browsers.
Use a different file format if you need the color match other elements, or make the background of the PNG transparent instead of green.
Rendering text is a different matter. There will always be slight differences in how browsers renders different fonts, depending on the rendering method used, which fonts are installed, and system/user settings. You simply can't expect exactly the same result in different browsers.
Google Chrome always seems to be changing the color of an image that I'm trying to match to a background color. I tried saving it in Photoshop and GIMP and even adjusted the color settings in each but it doesn't help in Chrome. FF and IE work fine (for once).
The color of my image is #282828. After I saved it as a PNG, I reopened it in both GIMP and Photoshop and used the eyedropper tool to confirm that the color was still #282828. When it renders in Chrome it's darker. I have a div with a background color of #282828, and the image is right next to it. I took a screen shot and the div's background color was #282828 and the images background color was #1d1d1d. I tried this for several different colors and each has had the same result. I even tried making the source image the color Chrome was rendering it as but Chrome still changes it. So for example, since Chrome was changing #282828 to #1d1d1d, I made the source image #1d1d1d, and when I rendered it in Chrome it was not #1d1d1d, but some other darker color.
At this point, I'm looking for either a fix or a programmatic work-around. Because the image is transparent, has curves, and a drop-shadow, there's really no way for me to avoid replacing the it, or even parts of it, with html.
Update:
I also tried saving it as a jpg and gif. gif actually works but can't preserve the drop shadow. The image I'm using is attached. If I take a screenshot of this in Chrome, GIMP's eyedropper tool says it's #1d1d1d. If I open the original and do the same, it's #282828.
PNG uses gamma correction to try to ensure that the image looks kinda the same across all monitors, and this can cause color mismatches like the one you're seeing. It's a combination of image editor issues and browser issues: image editors are not forced to embed gamma data inside images, and browsers are free to ignore the gamma correction if it's there and free to enforce some at random when it's not there. In this case, I'd rather think that Firefox ignores it.
Use a transparent PNG if you don't want its background to interfere with your page's background.
[EDIT] For your specific case, you may be able to replicate the graphics you're looking for by styling elements, using border-radius and box-shadow, two widely-implemented CSS3 properties that reasonably decay on older browsers.
I'm trying to create a button, where the font is bold but it also uses a text-shadow to make the text more readable. For whatever reason the text-shadow is not appearing when its added to the CSS, though in photoshop it makes a dramatic difference using the same values.
Here's the JSFiddle
Thank you for your help
The shadow is there, but it's so faint that it's nigh impossible to perceive, especially with a relatively low alpha value and when superimposed on a background with a similar hue.
I'm going out on a limb and guessing that in Photoshop, your text shadow has a layer style that causes it to have a different effect on the underlying background color. You may need to play around with the eyedropper tool and tweak the alpha value in your text shadow, in order to achieve something that better matches your Photoshop comp.