style="font-weight: 500;"

J

jambiani

Why cant i get my text to be 500 in boldness, my code
style="font-weight: 500;"

It will do if i write Bold, but not in numbers 100, 200, 300 .......

It says on www.w3schools.com but i cant get it to work.

Martin.
 
D

dorayme

"jambiani said:
Why cant i get my text to be 500 in boldness, my code
style="font-weight: 500;"

It will do if i write Bold, but not in numbers 100, 200, 300 .......

It says on www.w3schools.com but i cant get it to work.

If you have

h1.one { font-weight: 100 }
h1.two { font-weight: 200 }
h1.three{ font-weight: 300 }

etc

in your stylesheet

and

<h1 class="one">This text</h1>
<h1 class="two">This text</h1>
<h1 class="three">This text</h1>

etc

in your HTML

you will see the differences.

Remember, you are not styling for font-size here.
 
E

Ed Mullen

dorayme said:
If you have

h1.one { font-weight: 100 }
h1.two { font-weight: 200 }
h1.three{ font-weight: 300 }

etc

in your stylesheet

and

<h1 class="one">This text</h1>
<h1 class="two">This text</h1>
<h1 class="three">This text</h1>

etc

in your HTML

you will see the differences.

Remember, you are not styling for font-size here.

Err, what am I missing? I see no difference.

http://edmullen.net/temp/weight.html

--
Ed Mullen
http://edmullen.net
http://mozilla.edmullen.net
http://abington.edmullen.net
As the shopper placed her groceries on the checkout stand, the bagger
asked her paper or plastic? Doesn't matter, she replied, I'm bisackual.
 
R

Richard Formby

Ed Mullen wrote

[font-weight]
Err, what am I missing? I see no difference.

http://edmullen.net/temp/weight.html

You didn't go far enough.

In a test I ran font-weight 1 to 599 came up as 'normal', 600 to 999 'bold'.

Font-weight does not do what you think it does. It is not a gradual "sizing"
like font-size. The numbers are translated into the nearest "weight"
provided in the font. Most fonts only have two, normal and bold. Some only
have one.

And no, you can't change that. Font weight is a property of the font, that
is the .ttf, not the browser or the OS.
 
N

Nico Schuyt

jambiani said:
Why cant i get my text to be 500 in boldness, my code
style="font-weight: 500;"

Change the font-size:
style="font-size: 1.5em; font-weight: bold"
 
D

dorayme

Ed Mullen said:
Err, what am I missing? I see no difference.

http://edmullen.net/temp/weight.html

Perhaps you were not using my favourite font: "Rattlesnake" or
"Ice Prawn on the Barbi". (see the specs)

It appears that from the specs 200 is at least as dark as 100 and
300 is at least as dark as 200. Now, we can deduce from this that
something at 300 is at least as dark as 100. So you need to
understand that when I say "see the difference" I am referring to
something logically subtle. These things are not for mere eyes to
see.

Actually, I think it depends on a lot of stuff, about which font
and so on. Time for Dr. Korpela to come in and play straight man
now...

Hang on... I will set him some homework (he loves this sort of
thing... take no notice of his protests) and I expect him to have
a clear essay on the subject by time I wake up tomorrow morning.

Please read a section called "15.6 Font boldness: the
'font-weight' property", I reproduce it here because it is on my
machine and I cannot find the exact url for it right now:

For Dr. Korpela only, (it can actually be dangerous for lesser
souls to peruse this):

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.
 
E

Ed Mullen

Richard said:
Ed Mullen wrote

[font-weight]
Err, what am I missing? I see no difference.

http://edmullen.net/temp/weight.html

You didn't go far enough.

Right. Just wanted to know why the effect wasn't what it seemed dorayme
was implying. For those interested I changed the test page at the
link above.
In a test I ran font-weight 1 to 599 came up as 'normal', 600 to 999 'bold'.

Font-weight does not do what you think it does. It is not a gradual "sizing"
like font-size. The numbers are translated into the nearest "weight"
provided in the font. Most fonts only have two, normal and bold. Some only
have one.

And no, you can't change that. Font weight is a property of the font, that
is the .ttf, not the browser or the OS.

Understood, thanks.

Do you know of a good online resource that describes what Windows fonts
have what weights built into them? Are there any that have more than
two? I doubt I'd ever use this formatting but my curiosity has been
piqued. ;-)

--
Ed Mullen
http://edmullen.net
http://mozilla.edmullen.net
http://abington.edmullen.net
I heard that in relativity theory, space and time are the same thing.
Einstein discovered this when he kept showing up three miles late to
meetings.
 
E

Ed Mullen

dorayme said:
Perhaps you were not using my favourite font: "Rattlesnake" or
"Ice Prawn on the Barbi". (see the specs)

It appears that from the specs 200 is at least as dark as 100 and
300 is at least as dark as 200. Now, we can deduce from this that
something at 300 is at least as dark as 100. So you need to
understand that when I say "see the difference" I am referring to
something logically subtle. These things are not for mere eyes to
see.

Ah, yes! I see now. But from your post I assumed (obviously
erroneously) that the specific code you suggested would demonstrate a
difference, as in your statement "you will see the differences." I can
see from Richard's reply quite easily why that example didn't work.

[snip]
CSS 2.1 does not specify how the computed value of font-weight is
represented internally or externally.

All of the citation you gave was fascinating. However, that last line
there is quite precious, reminding me just why I love computers so much:
Everything makes perfect sense even when it doesn't. :-D

--
Ed Mullen
http://edmullen.net
http://mozilla.edmullen.net
http://abington.edmullen.net
I can please only one person per day. Today is not your day. And
tomorrow isn't looking good either.
 
D

dorayme

Ed Mullen said:
All of the citation you gave was fascinating. However, that last line
there is quite precious, reminding me just why I love computers so much:
Everything makes perfect sense even when it doesn't. :-D

OK Ed, this morning I am less embarrassed. I assumed something
would be visible and at last minute changed an example to 100,
200, 300 for symmetry... without checking. Funny how these things
are educative anyway... I am glad you posted.
 
E

Ed Mullen

dorayme said:
OK Ed, this morning I am less embarrassed. I assumed something
would be visible and at last minute changed an example to 100,
200, 300 for symmetry... without checking. Funny how these things
are educative anyway... I am glad you posted.

No need for embarrassment at all. Your example piqued my curiosity
enough to make a sample page so I could understand the technique.
Definitely a good learning experience!

--
Ed Mullen
http://edmullen.net
http://mozilla.edmullen.net
http://abington.edmullen.net
Why do banks charge you a non-sufficient funds fee on money they already
know you don't have?
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,743
Messages
2,569,478
Members
44,898
Latest member
BlairH7607

Latest Threads

Top