/    Sign up×
Community /Pin to ProfileBookmark

Font Weight Property

I’m getting a bit frustrated with this whole Font-weight property. I read on websites that it can accept values like 100-900, bold, bolder, normal, and lighter. I also see that compatible with NN 4.0 and IE 4.0 (Im’ running IE 5.5 and Mozilla 1.2). If this is true, then please take a look at this page:

[url]www.wblondon.com/telconstar99/test.html[/url]

For me, it looks like 100-500, Normal, and Lighter are all the same. It also looks like 700-900, Bold, and Bolder are also the same. The value of 600 looks slightly less bold.

Why doesn’t the property work as it was supposed to?

Thank you for your help.

to post a comment
CSS

24 Comments(s)

Copy linkTweet thisAlerts:
@ShrineDesignsDec 27.2002 — it also depends on what font size you use

the smaller the size the more similar the weights are

the larger the size the more different the weights are
Copy linkTweet thisAlerts:
@telconstar99authorDec 27.2002 — I increased the font size to 37, then to 57. I could see no changes. For the size 57 tests, check out:

http://wblondon.com/telconstar99/test2.html

Any other ideas?
Copy linkTweet thisAlerts:
@ShrineDesignsDec 28.2002 — o'reilly reference

normal is equal to 400

bold is equal to 700

other settings (bolder and lighter) let you specify a weight relative to the parent element's weight.
Copy linkTweet thisAlerts:
@StefanDec 28.2002 — [i]Originally posted by telconstar99 [/i]

I read on websites that ... ... compatible with NN 4.0 and IE 4.0 (Im' running IE 5.5 and Mozilla 1.2). [/QUOTE]


Don't belive everything you read ?

Most of these webplages only test if a browser implements something in very simple testcases that certainly doesn't test all aspects of the property.

They have probaly just tested the 400=normal and 700=bold and happily conclude that it works in all browsers.

A fine scale from 100-900 however is virtually non exsistant even in modern browsers.
Copy linkTweet thisAlerts:
@telconstar99authorDec 28.2002 — Thanks Stefan. I wish these modern browsers could implement it. Now I'm rather stuck. I'm looking to change the font of the text found on the this page:

http://telconstar.com

It's too bold right now, however, at normal, it's too light! I just wish browsers came stocked with more fonts! These web-safe fonts are a hindrance.

Oh well, back to the drawing board.
Copy linkTweet thisAlerts:
@gil_davisDec 28.2002 — Could it be an OS limitation, rather than a "bug in the browser"? When the browser "requests" a font, the OS supplies the closest thing it has, comparing height and weight, trying to satisfy the request.

For example, my PC has 4 different weights for the Arial font - black, bold, narrow, and "standard".
Copy linkTweet thisAlerts:
@telconstar99authorDec 28.2002 — Good point, it might be a shortcoming with the font itself. I'm no typography expert, so I couldn't really say. It does make me wonder though.
Copy linkTweet thisAlerts:
@StefanDec 28.2002 — [i]Originally posted by gil davis [/i]

[B]Could it be an OS limitation, rather than a "bug in the browser"? When the browser "requests" a font, the OS supplies the closest thing it has, comparing height and weight, trying to satisfy the request.



For example, my PC has 4 different weights for the Arial font - black, bold, narrow, and "standard". [/B]
[/QUOTE]


A plausable theory I would say.

But still, peaople are not likely to have 9 boldness-states of the same font, so for this to work browsers would probably have to implement it natively in the future.
Copy linkTweet thisAlerts:
@King_PellinoreDec 30.2002 — I made a new variant, on the same page. http://newsdf.tripod.com/webforum/onebutton.html

There are now two buttons: the old one, made using JavaScript, and the new one, made with CSS only.

My browser reloads both!

I didn't think that the CSS would work thusly, I thought it was only the JScript folly of a certain company with an address of 1 Microsoft Way, Redmond. But script changes only the CSS rule, I realised, so the problem lies within CSS..., or someone's interpretation of it.

I checked Mozilla. It indeed works there. I think now that caching is the problem. May be your browser caches the image. My downloads it. I don't have caching disabled, but it doesn't work sometimes. Actually, always, when images are loaded through script, (rollovers that rely on cached preloaded images don't work and are generally very annoying over here). I also know some people do disable cache and this makes me search for another solution...

Now, the questions.

1. Validator says that I can't have a <div> inside an <a>, such as in the code:&lt;a href="sdf.cgi?home" class="link-n"&gt;
&lt;div class="div-menu-item2"&gt;Home&lt;/div&gt;
&lt;/a&gt;
, though, like you said, I did specify display: block; in styles (does the parser account for CSS?). Am I allowed to put a <div> inside an <a>?

2.Ran out of questions.


______[u]EDIT[/u]________

Right. Wrong thread. It will be appreciated if this is moved to the right thread, please. http://forums.webdeveloper.com/showthread.php?s=&threadid=1409 after post number 6
Copy linkTweet thisAlerts:
@StefanDec 30.2002 — [i]Originally posted by King Pellinore [/i]

Now, the questions.

1. Validator says that I can't have a <div> inside an <a>, such as in the code:&lt;a href="sdf.cgi?home" class="link-n"&gt;
&lt;div class="div-menu-item2"&gt;Home&lt;/div&gt;
&lt;/a&gt;
, though, like you said, I did specify display: block; in styles (does the parser account for CSS?). Am I allowed to put a <div> inside an <a>?
[/QUOTE]


No, the markup needs to be valid on it's own.

But why would you want to put a div in an <a> to begin with?

If you must have one use eg

<a><span></span></a>

CSS

a, span {display:block;}


BTW, what does this have to do with fontboldness?

Did you post in the wrong thread? ?

Eg thisone instead http://forums.webdeveloper.com/showthread.php?s=&threadid=1409
Copy linkTweet thisAlerts:
@gil_davisJan 14.2003 — FWIW, I found an interesting explanation in the CSS1 spec on font weight at http://www.w3.org/TR/REC-CSS1#font-weight :
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 you 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 CSS1 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.[/quote]

So, the weight is dependent on the fonts available on the client.
Copy linkTweet thisAlerts:
@StefanJan 16.2003 — Thanks for the heads up Gil ?
Copy linkTweet thisAlerts:
@telconstar99authorJan 20.2003 — Yeah, thanks for the heads up.

BTW, why are you a NS 4.X die-hard user? Aren't there better browsers out there?
Copy linkTweet thisAlerts:
@gil_davisJan 20.2003 — [i]Originally posted by telconstar99 [/i]

[B]Aren't there better browsers out there? [/B][/QUOTE]
IMHO, no (obviously). ?

You'd have to define "better", wouldn't you? If "better" is defined by W3C recommendations, then NS 4 is deficient. You have to remember that NS 4 was cutting edge Dynamic HTML when it was first released in 1994. It pre-dates IE 4 and the CSS1 recommendations (1996).

There are more capable browsers, but mostly all I want is fast access to real information, not fluff and advertising. I don't much care what font or color it is.
Copy linkTweet thisAlerts:
@telconstar99authorJan 20.2003 — I see.

A text only browser might be better for you then.
Copy linkTweet thisAlerts:
@CharlesJan 20.2003 — [font=goergia]Have you given Opera a try recently? It's way fast and you can quickly toggle things like JavaScript, images and even tables. And the mouse gestures are more than just a cute gimick.[/font]
Copy linkTweet thisAlerts:
@meowJan 21.2003 — [i]Originally posted by gil davis [/i]

[B]You have to remember that NS 4 was cutting edge Dynamic HTML when it was first released in 1994. It pre-dates IE 4 and the CSS1 recommendations (1996).

[/B]
[/QUOTE]

Funny how they managed to map some of their JSSS to CSS before CSS was released. ?

Netscape 4 was released 1997. Netscape 1 was released 1994. Personally I think Netscape 3 is a lovely browser (really!).
Copy linkTweet thisAlerts:
@StefanJan 21.2003 — [i]Originally posted by meow [/i]

Funny how they managed to map some of their JSSS to CSS before CSS was released. ?

Netscape 4 was released 1997. [/QUOTE]


Yes, but the previews was available already in 1996. So in essence most of the browsercode predates the CSS 1 release.

That is also the reason it sucks so much with CSS, it was just added/patched on at very late stages and not incorporated from grounds up as it should be.
Copy linkTweet thisAlerts:
@telconstar99authorJan 21.2003 — You guys remember that stuff? I started coding around IE 5.1. I still remember the day I discovered the <blink> tag. That was a sad day...
Copy linkTweet thisAlerts:
@meowJan 21.2003 — That was my point. 1994 browsers were pleasingly free from CSS. :p
Copy linkTweet thisAlerts:
@telconstar99authorJan 21.2003 — True, however, CSS increases efficiency like nobodies business. I remember the days before I discovered CSS. I spent hours searching every HTML file to make a single change to my site. Now with CSS, I can change a property across the board in under a minute. EXTREMEMLY convienant.
Copy linkTweet thisAlerts:
@meowJan 21.2003 — Oh, I love CSS. But I don't like to have to implement workarounds for browsers with broken CSS. That's why I say Netscape v.1 was pleasingly free from CSS. :p
Copy linkTweet thisAlerts:
@StefanJan 21.2003 — [i]Originally posted by meow [/i]

[B]1994 browsers were pleasingly free from CSS. :p [/B][/QUOTE]


HERECY!!!

Guys round him up and I'll prepare the stake ?
Copy linkTweet thisAlerts:
@meowJan 21.2003 — mama! :eek:
×

Success!

Help @telconstar99 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.21,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...