字體重量：100無法在reactjs / javascript中工作

Question

我在實現字體粗細方面遇到問題：100。

我希望我的句子超輕/薄，但是當我使用font-weight：100時，它不起作用。

我該怎么辦？ 我需要導入或安裝某些東西嗎？

我正在使用reactjs。

<p class="thin">Test</p>

.thin {
  font-weight: 100;
}

Answer 1

為了使用特定的字體粗細，您的字體必須支持它，如果不支持，則0到600之間的任何值（不包括，正常值為400）將被解釋為正常，任何更大的值將被加粗（通常為700）。

如果您的字體沒有淺/薄變體，那么恐怕您無法獲得比普通字體（400）更細的字體粗細。

編輯說明：對於非正常字體（400），默認情況下瀏覽器會生成粗體，例如：

 @import url('https://fonts.googleapis.com/css?family=Roboto'); p { font-family: 'Roboto'; font-weight: 700; } 

 <p>This is bold, but I didn't loaded Roboto 700, only Roboto 400.</p> 

在這種情況下，渲染可能會因瀏覽器而異，盡管通常沒有差異。

Answer 2

如果您在Google字體上選擇一種字體，則有兩種選擇：使用默認的嵌入代碼嵌入它或對其進行自定義（選擇字體后在覆蓋層中）

如果自定義它，則可以選擇要包括的字體粗細。 並非每種字體都支持每種字體粗細。 如果您無法選擇它，則該字體不存在。