如何使用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