using 'lighter' weight of a font

I'm trying to use the "Helvetica Light" font, which comes bundled with Helvetica. To do this I read that I had to specify "Helvetica Light" AND font-开发者_开发技巧weight: lighter. I've gotten this to work only by doing this (in SASS):

  p    
    font: "Helvetica Light", Arial, sans-serif
    font-size: 12px
    font-weight: lighter

and in other instances,

 h2.light    
    font: Helvetica, Arial, sans-serif
    font-size: 12px
    font-weight: lighter

(or with font-family instead of font)

which is really weird and the only combos that works so far (combining all properties into 'font' doesn't work, and calling the font: as font-family: sometimes doesn't work.

In another rule, I wasn't able to get it to work unless I ONLY had font-weight: lighter with no font specified (but it inherited Helvetica).

Now I copied the exact same font styles as the p and put it in an h4 and it no longer works. Wtf? What am I doing wrong/why is this so buggy?

EDIT: THIS IS NOT A SYNTAX PROBLEM. To the answers below, note that I am using SASS. No semicolons and brackets needed. Also the file I am editing is 5k lines long (a hand me down) and grouped into somewhat organized sections. So I'd like to keep the sections intact until I can refactor it, but then I can't group all the p's and h2.lights together since they are in different sections. Thanks!

Try this.

p
  font: 'Helvetica Light', 'Helvetica', Arial, sans-serif
  font-size: 12px
  font-weight: 100

Just for reference, lighter works relative to the inherited value. It's better to use absolute values.

http://www.w3.org/TR/CSS2/fonts.html#font-boldness

what finally worked for me was to have font-family as Helvetica, and font-weight as lighter (but not the condensed format, which doesn't work).

Note: this answer was written before the OP specified SASS. It applies to CSS only.

A couple of things you should do to clean this up:

Semi-colons

All your CSS rules should end with a semi-colon, such as font-weight:lighter;

Grouping

As you have 2 identical CSS rules, the fastest and most concise way to do it is this:

p, 
h2.light,
other_rules {
  font: Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: lighter;
}

Then for the one rule where you want a different font,

p{ font: "Helvetica Light", Arial, sans-serif; }

Be sure to put your exceptions below the general rules (i.e. in the order I've shown you here) because CSS is implemented in order, and a rule further down the document will take priority.

Try this:

  p, h2.light
    font: "Helvetica Light", Arial, sans-serif
    font-size: 12px
    font-weight: lighter

inheritance, establish a base metric typography, so device doesn't crack-up style intersections

body[role="put something here"] h1, p, etc

font-size: 62.5%

Helvetica light, mix with unix-mac-windows-webfont (webfont needs js, may pull you up over edge

font-family

Helvetica Light, Helveticaneue Light, Calibri Light,  Helveticaneue, Helvetica, Gill Sans, Myriad Pro, Arial, Lucida Grande, sans-serif

degrade per Meyer, or try just 2 hl, ss... also, check out your mixin
https://github.com/less/less.js/issues/389

Sass for Web Designers by Dan Cedarholm and Chris Coyier