Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

font-weight? do the numbers work? 1

Status
Not open for further replies.

1DMF

Programmer
Jan 18, 2005
8,795
GB
Hello,

I'm trying to apply a heavier weight(boldish) to a paragraph, I've read W3Schools and they give the standard normal, bold, etc but also show a number scale.

Apparently 400 = normal and 700 = bold , so i set the weight to 600 as bold is too bold, however in FF nothing happens and in I.E. all 600 seems to do is make the space between each word larger but the font is the same thickness.

am I to take it the number scaling doesn't work in browsers or do I need to use it in conjunction with another attribute.

thanks,
1DMF.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
1DMF, here is a clip taken from
exact URL is
shows that fonts only have a specific number of weights associated with them.

15.6 Font boldness: the 'font-weight' property
'font-weight'
Value: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
Initial: normal
Applies to: all elements
Inherited: yes
Percentages: N/A
Media: visual
Computed value: see text

The 'font-weight' property selects the weight of the font. The values '100' to '900' form an ordered sequence, where each number indicates a weight that is at least as dark as its predecessor. The keyword 'normal' is synonymous with '400', and 'bold' is synonymous with '700'. Keywords other than 'normal' and 'bold' have been shown to be often confused with font names and a numerical scale was therefore chosen for the 9-value list.

p { font-weight: normal } /* 400 */
h1 { font-weight: 700 } /* bold */
The 'bolder' and 'lighter' values select font weights that are relative to the weight inherited from the parent:

strong { font-weight: bolder }
Child elements inherit the resultant weight, not the keyword value.

Fonts (the font data) typically have one or more properties whose values are names that are descriptive of the "weight" of a font. There is no accepted, universal meaning to these weight names. Their primary role is to distinguish faces of differing darkness within a single font family. Usage across font families is quite variant; for example, a font that one might think of as being bold might be described as being Regular, Roman, Book, Medium, Semi- or DemiBold, Bold, or Black, depending on how black the "normal" face of the font is within the design. Because there is no standard usage of names, the weight property values in CSS 2.1 are given on a numerical scale in which the value '400' (or 'normal') corresponds to the "normal" text face for that family. The weight name associated with that face will typically be Book, Regular, Roman, Normal or sometimes Medium.

The association of other weights within a family to the numerical weight values is intended only to preserve the ordering of darkness within that family. However, the following heuristics tell how the assignment is done in typical cases:

If the font family already uses a numerical scale with nine values (like e.g. OpenType does), the font weights should be mapped directly.
If there is both a face labeled Medium and one labeled Book, Regular, Roman or Normal, then the Medium is normally assigned to the '500'.
The font labeled "Bold" will often correspond to the weight value '700'.
If there are fewer then 9 weights in the family, the default algorithm for filling the "holes" is as follows. If '500' is unassigned, it will be assigned the same font as '400'. If any of the values '600', '700', '800' or '900' remains unassigned, they are assigned to the same face as the next darker assigned keyword, if any, or the next lighter one otherwise. If any of '300', '200' or '100' remains unassigned, it is assigned to the next lighter assigned keyword, if any, or the next darker otherwise.
The following two examples show typical mappings.

Assume four weights in the "Rattlesnake" family, from lightest to darkest: Regular, Medium, Bold, Heavy.

First example of font-weight mapping Available faces Assignments Filling the holes
"Rattlesnake Regular" 400 100, 200, 300
"Rattlesnake Medium" 500
"Rattlesnake Bold" 700 600
"Rattlesnake Heavy" 800 900

Assume six weights in the "Ice Prawn" family: Book, Medium, Bold, Heavy, Black, ExtraBlack. Note that in this instance the user agent has decided not to assign a numeric value to "Ice Prawn ExtraBlack".

Second example of font-weight mapping Available faces Assignments Filling the holes
"Ice Prawn Book" 400 100, 200, 300
"Ice Prawn Medium" 500
"Ice Prawn Bold" 700 600
"Ice Prawn Heavy" 800
"Ice Prawn Black" 900
"Ice Prawn ExtraBlack" (none)

Since the intent of the relative keywords 'bolder' and 'lighter' is to darken or lighten the face within the family and because a family may not have faces aligned with all the symbolic weight values, the matching of 'bolder' is to the next darker face available on the client within the family and the matching of 'lighter' is to the next lighter face within the family. To be precise, the meaning of the relative keywords 'bolder' and 'lighter' is as follows:

'bolder' selects the next weight that is assigned to a font that is darker than the inherited one. If there is no such weight, it simply results in the next darker numerical value (and the font remains unchanged), unless the inherited value was '900' in which case the resulting weight is also '900'.
'lighter' is similar, but works in the opposite direction: it selects the next lighter keyword with a different font from the inherited one, unless there is no such font, in which case it selects the next lighter numerical value (and keeps the font unchanged).
There is no guarantee that there will be a darker face for each of the 'font-weight' values; for example, some fonts may have only a normal and a bold face, while others may have eight face weights. There is no guarantee on how a UA will map font faces within a family to weight values. The only guarantee is that a face of a given value will be no less dark than the faces of lighter values.

The computed value of "font-weight" is either:

one of the legal number values, or
one of the legal number values combined with one or more of the relative values (bolder or lighter). This type of computed values is necessary to use when the font in question does not have all weight variations that are needed.
CSS 2.1 does not specify how the computed value of font-weight is represented internally or externally.



[small]"I see pretty girls everywhere I look, everywhere I look, everywhere I look. - Band song on movie "The Ringer"[/small]
<.
 
ah so the weight is relative to the font-face specificaly, and not the desired weight persae.

I ended up using font-size:80% , and italic to make it the sort of style I required.

not perfect but it will do!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top