2016-08-05 75 views
1

如何減少文本的粗體?

#first { 
 
    text-align: center; 
 
    font-size: 40px; 
 
    font-weight: 200; 
 
} 
 
#second { 
 
    text-align: center; 
 
    font-size: 25px; 
 
    font-weight: 50; 
 
} 
 
#third { 
 
    text-align: center; 
 
}
<p id="first">One account.All of google</p> 
 
<p id="second">Sign in to continue to Gmail</p> 
 
<div id="login"> 
 
    <form> 
 
    <img src="img.jpg"> 
 
    <input type="text" name="username" value="Enter your username"> 
 
    <br> 
 
    <input type="password" name="password" value="password"> 
 
    <br> 
 
    <input type="submit" value="Sign in"> 
 
    <br> 
 
    <a href="">Forgot password?</a> 
 
    </form> 
 
</div> 
 
<p id="third">Sign in with different account</p>

我無法做出font-weight下降。我希望#second id的權重小於#first id的權重。我使用了font-weight,但它仍然無法正常工作。

+1

你想讓'#秒'擁有100的權重嗎?你使用的字體是否支持這個重量? – steveax

+0

單獨的字體只支持某些權重。許多字體只支持700的重量。請檢查您使用的字體,並確保它支持您要使用的重量。 – TylerH

+0

使用您正在使用的字體的「半粗體」和「常規」版本來獲得不同的字體重量總是一個好習慣。 –

回答

4

字體重量是不是一個動態的東西。你不能任意決定使用一個值,並期望改變字體權重。 font-weight: 50;從不一個正確的屬性。沒有字體包含「50」的重量。

瀏覽器,或CSS,做創建字體粗細,或應用僞重量(重量人造),以字體與唯一需要注意的是在bold名稱 - 瀏覽器可以創建一個虛假的「大膽」的一些案例。使用中的字體文件必須爲擁有權重才能生效font-weight屬性。瀏覽器可能會猜測並使用下一個最接近的權重。有時瀏覽器可能會有足夠的猜測,有時即使猜測出來,它們也不會在字體文件中使用任何內容。

有字體重量的兩種基本形式 -

通用術語:

  • font-weight: normal; - 使用標準重量的字體
  • font-weight: bold;的 - 使用的字體的的重量即大於「正常」如果字體包含此重量
  • font-weight: bolder; - 使用的字體的權重大於「正常」 2x 如果字體包含此重量。後退是使用立即大於「正常」或「粗體」的重量。
  • font-weight: lighter; - 如果字體包含此重量,則使用的字體重量小於「正常」。後退是使用「正常」重量。
  • font-weight: inherit; - 繼承父元素
  • font-weight: initial;的重量 - 使用的字體

方案(2),比重指定的默認權重。請注意,字體文件必須被配置爲在內部包含這些指定。你不能簡單地選擇一個數字並使用它。

  • font-weight: 100;如果字體包含此重量
  • font-weight: 200;如果字體包含此重量
  • font-weight: 300;如果字體包含此重量
  • font-weight: 400;如果字體包含此重量

設置font-weight: 100;到不包含100重量指定的字體只是意味着瀏覽器將使用下一個最接近的重量是提供。因此,如果您的字體文件僅包含400,600和900的權重 - 如果您將權重設置爲100和200,則400重量將用於兩個實例中,因爲400是最接近100和200的值。將重量設置爲700可能意味着瀏覽器使用900重量的600重量或。在大多數情況下,選擇較小的值,因此最有可能使用600重量。

如果您想爲字體系列使用特定的權重,首先需要確保字體文件本身包含該權重。根據您發佈的標記,您需要使用實際上包含012和200和100重量名稱的字體。