Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

font-weight lighter is not a font-weight value

font-weight lighter is not a font-weight value

Problem

I'm getting a Validator error for my stylesheets but I don't know how to solve that one. The error:

Value Error : font-weight lighter is not a font-weight value : lighter 

And the CSS causing the error:

@font-face {
    font-family: 'opensans';
    src: url('../fonts/OpenSans-Light-webfont.eot');
    src: url('../fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans-Light-webfont.woff') format('woff'), url('../fonts/OpenSans-Light-webfont.svg#opensans') format('svg');
    font-weight: lighter;
    font-style: normal;
}

Isn't "lighter" a standard value? Or do I have to use "font-weight:100" instead? I'm confused.

Problem courtesy of: Andi

Solution

The value of the lighter weight relates to the weight value of the parent element. In the case of @font-face there is no parent element, and therefore a lighter font-weight cannot be determined.

So yes, you'll have to use font-weight: 100; if that's your desired weight.

It's worth noting that 100 isn't equal to lighter. The value of lighter depends on the parent value. If the parent value is 900, for instance, lighter will set the value to 700 (as noted in the specification).

Solution courtesy of: James Donnelly

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

font-weight lighter is not a font-weight value

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×