如何使用CSS或Javascript或jQuery使粗体字体变薄？

Question

如果我使用的是字体并且没有粗体版本，我可以使用标签text-shadow ，添加轮廓以使细字体变粗。

但我只有粗体字，我想让它更薄。 我不知道要使用什么CSS或Javascript或jQuery脚本。

是否可以使用CSS，Javascript或jQuery使粗体字体变薄？ 怎么样？

Answer 1

你不能使字体更薄。 即使使用text-shadow更大胆也不是真实的：它会产生扭曲的字体呈现，而不是更大胆的字体。

因此，您应根据您使用不同字体（包括不同重量）的意图以及每个字体系列中字体的可用性来选择字体系列。

浏览器可以实现小于400的font-weight值，其方式与某些浏览器在没有粗体字体时实现大于400的值相同，即通过算法更改宽度更粗。 但是没有浏览器似乎这样做。

Answer 2

虽然迟到了
要使字体更薄，请添加

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

然后在头部区域设置文本样式

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

使用font lato，您可以获得所需的字体厚度，并在所有浏览器中进行测试。
在这里检查这些字体
它对我来说很完美。

Answer 3

虽然浏览器可以生成粗体版本，但我不知道它们可以执行相反的过程。 对于非常粗略的近似，您可以使用transform生成更轻和更窄的文本：

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

但这是一个非常粗糙的黑客，需要注意每种字体的比例值。

Answer 4

你的意思是CSS font-weight属性？ 您可以在这里参考如何使用该属性。 http://www.w3schools.com/cssref/pr_font_weight.asp