How to make the bold font getting thin, using CSS or Javascript or jQuery?

Question

If I am using a font and don't have the bold version, I could use the tag text-shadow, adding a contour to make the thin font bolder.

But I have only the bold font, and I want to make it thinner. I don't know what CSS or Javascript or jQuery script to use.

Is it possible to make a bold font thinner using CSS, Javascript or jQuery? How?

Invar

Answer 1

You cannot make a font thinner. Even making it bolder with text-shadow is not real: it produces a distorted presentation of the font, not a bolder font.

So you should select your font family according to your intentions of using different typefaces (including different weights) and the availability of typefaces in each font family.

Browsers could implement font-weight values smaller than 400 in the same manner as some browsers implement some values larger than 400 when no bold typeface is available, namely by algorithmically changing the widths thicker. But no browser seems to do that.

Separative

Ah, I understood, what a pity. Thank you a lot for your answer! – Invar

Answer 2

Though late
To make font thinner, add

    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic">

in the head section then style your text

style = "font-family: Lato;
          font-weight:100 or 200 or 300... (according to the thinness you want);
          font-size: ...;"

With font lato, you can achieve the thickness if font you want and its tested in all browsers.
Check these fonts here
It worked perfectly for me.

Princedom

Some of these fonts look a bit wonky in my Chrome browser. – Bestraddle

@Alex.Kasina, yes, I know it, but I mean if one fonts family doesn't have one thinner or bolder font or the fonts family has only one bold font OR one thinner font, I want to make it thinner or bolder. – Invar

Answer 3

While browsers can generate bold versions, I am not aware they can do the reverse process. To a very rough approximation, you can generate text that is both lighter and narrower using transform:

<div style="transform: scaleX(0.8);transform-origin:center left">This might very well appear lighter./div>

but that is a very crude hack at best and requires eyeballing the scale value for every font.

Childhood

Answer 4

Do you mean the CSS font-weight Property? You can refer how to use the property here. http://www.w3schools.com/cssref/pr_font_weight.asp

Rey

Yes, but this "font-weight" doesn't make the bold font getting lighter or thin. – Invar