如何使用CSS或Javascript或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?

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.

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.

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.

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