Wie verringert man die Kühnheit eines Textes?

Question

#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>

Ich bin nicht in der Lage die font-weight zu verringern zu machen. Ich möchte die #second ID weniger Gewicht haben als die #first id one. Ich habe die font-weight verwendet, aber es funktioniert immer noch nicht.

Answer 1

Schriftgewichte sind nicht eine dynamische Sache. Sie können nicht willkürlich entscheiden, einen Wert zu verwenden und erwarten, dass sich das Schriftgewicht ändert. font-weight: 50; ist nie eine korrekte Eigenschaft. Keine Schriftart enthält ein "50" -Gewicht.

Ein Browser oder CSS, tut nicht Schriftschnitt erstellen oder anwenden pseudo-Gewichte (faux Gewicht) Schriftarten mit dem einzigen Vorbehalt, wobei die bold Bezeichnung - Browser einen faux erstellen kann "bold" in manche Fälle. Die verwendete Schriftdatei muss besitzen das Gewicht für die font-weight Eigenschaft, um Wirkung zu haben. Browser Mai erraten und verwenden Sie das nächste Gewicht. Manchmal kann ein Browser richtig raten, manchmal nicht oder es ist nichts in der Schriftdatei zu verwenden, selbst wenn eine Vermutung gemacht wird.

Es gibt zwei grundlegende Formen der font-weight -

Oberbegriffe:

• font-weight: normal; - verwendet das Standard-Gewicht der Schrift
• font-weight: bold; - nutzt das ein Gewicht von der Schriftart, die ist größer als "normal" Wenn die Schriftart dieses Gewicht enthält
• font-weight: bolder; - verwendet ein Gewicht der Schriftart, die größer als "normal" ist 2x , wenn die Schriftart dieses Gewicht enthält. Fallback ist die Verwendung des Gewichts sofort größer als "normal" oder "fett".
• font-weight: lighter; - verwendet ein Gewicht der Schrift, die kleiner ist als "normal" , wenn die Schriftart dieses Gewicht enthält. Fallback ist die Verwendung des "normalen" Gewichts.
• font-weight: inherit; - Erbt das Gewicht des übergeordneten Elements
• font-weight: initial; - verwendet das Standardgewicht der Schrift

Und Option zwei, das spezifische Gewicht Bezeichnungen. Beachten Sie, dass die Schriftartendatei konfiguriert sein muss, um diese Bezeichnungen intern zu enthalten. Sie können nicht einfach eine Nummer auswählen und verwenden.

• font-weight: 100;, wenn die Schriftart dieses Gewicht
• font-weight: 200;enthält, wenn die Schriftart dieses Gewicht enthält
• font-weight: 300;, wenn die Schriftart dieses Gewicht
• font-weight: 400;enthält, wenn die Schriftart dieses Gewicht enthält
• usw.

font-weight: 100; auf eine Schriftart einstellen, die nicht die 100 Gewicht Bezeichnung enthält einfach bedeutet, dass der Browser das nächstgelegene Gewicht verwenden, dass verfügbar ist. Wenn Ihre Schriftdatei nur Gewichte für 400, 600 und 900 enthält - wenn Sie das Gewicht auf 100 und 200 setzen, wird das 400-Gewicht in beide-Instanzen verwendet, da 400 den nächsten Wert zu 100 und 200 ist Wenn Sie das Gewicht auf 700 einstellen, könnte der Browser das 600-Gewicht oder des 900-Gewichts verwenden. In den meisten Fällen wird der niedrigere Wert gewählt, so dass höchstwahrscheinlich das Gewicht von 600 verwendet würde.

Wenn Sie bestimmte Gewichtungen für eine Schriftfamilie verwenden möchten, müssen Sie zunächst sicherstellen, dass die Schriftdatei selbst dieses Gewicht enthält. Basierend auf Ihrem veröffentlichten Markup müssen Sie eine Schriftart verwenden, die tatsächlich die 200 und 100 Gewicht Bezeichnungen enthält.