Menu
A while ago I made a fixed div as a navigation menu for a page. I noticed that the text's font-weight decreased when it scrolled over a vimeo flash movie.
Now I am seeing it again in another navigation menu, but this time while scrolling over a jquery google map: http://jorenfrielink.com/beta/
As you can see the menu button's font-weight decreases when it overlays the map. So far I've noticed this in chrome and safari.
Is this a common problem and what is there to do about it?
660
You can use the <b> tag, the <strong> tag, or you can do it in CSS with the font-weight property.
Font weight is the “value” placed on your font that will determine how bold or light your text will appear. There are many “values” that you can use that provide a great deal of flexibility towards creating the font weight that works best for how you want to display your text.
The font-weight property sets how thick or thin characters in text should be displayed.
You can use font-weight to change the lightness or boldness of text, then give it a value such as normal , lighter , bold , or bolder . You can also use values like 100, 200, 500, and so on. Just like font size, you can change the font-weight in inline, embedded, or external CSS.
Something is causing your font smoothing to change, things like css3 animations or transforms can cause that. Try adding this to your navigation text:
-webkit-font-smoothing: subpixel-antialiased;
As Joren mentioned: -webkit-font-smoothing: antialiased;
This worked in Chrome + Safari
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
