The grubość czcionki Właściwość w CSS służy do ustawiania grubości lub grubości czcionki. Określa, jak cienkie lub grube są znaki w tekście. The grubość czcionki właściwość zależy od grubości określonej przez przeglądarkę lub dostępnych krojów czcionek w rodzinie czcionek. Ta właściwość CSS definiuje znaki od cienkich do grubych.

Akceptuje predefiniowaną wartość liczbową lub wartości słów kluczowych. Dostępne słowa kluczowe, których możemy użyć w przypadku tej właściwości, to normalny, odważny, jaśniejszy i odważniejszy . Wartość liczbowa może wynosić 100, 200, 300,...... aż do 900. Wyższa wartość liczbowa oznacza grubszą czcionkę niż niższe wartości liczbowe.

Składnia

 font-weight: normal | bold | bolder | lighter | number | initial | inherit; 

The numer w powyższej składni reprezentuje wartości numeryczne. Wartość liczbowa 400 jest taka sama jak wartość słowa kluczowego normalna i wartość 700 jest taka sama jak wartość słowa kluczowego pogrubiony .

The normalna strong> definiuje normalne znaki, a pogrubiony wartość określa grube znaki. The odważniejszy wartość reprezentuje pogrubioną grubość czcionki, a zapalniczka wartość reprezentuje mniejszą grubość czcionki niż grubość odziedziczona od elementu nadrzędnego.

Zobaczmy, jak pogrubić tekst w CSS za pomocą ilustracji.

Wstęp

CSS jest znany jako potężne narzędzie do tworzenia stron internetowych. Dzięki temu możemy stylizować treść HTML na wiele sposobów. Jedną z najczęstszych właściwości stylizacji strony internetowej jest użycie właściwości czcionki. Za pomocą pogrubionego tekstu możemy podkreślić najważniejsze informacje i kontrast wizualny, a także poprawić czytelność treści.

Zrozumienie właściwości wagi czcionki

W CSS istnieje właściwość Font-Weight, która służy do określenia wagi lub grubości czcionki. Określa także stopień pogrubienia lub jasności tekstu, przy czym wyższa wartość oznacza większą grubość czcionki. Właściwość Font-weight akceptuje różne wartości, takie jak wartości liczbowe i wartości słów kluczowych.

Zakres wartości numerycznych mieści się w przedziale od 100 do 900, z przyrostem co 100. Na przykład, jeśli przyjmiemy wartość grubości czcionki jako 400, to jest to normalne, natomiast wartość grubości czcionki 700 jest uważana za pogrubioną. Pogrubione, odważniejsze, jaśniejsze i niektóre często używane wartości słów kluczowych.

Jak utworzyć pogrubiony tekst za pomocą CSS

Pogrubiony tekst możemy utworzyć w formacie HTML za pomocą CSS. Możemy używać wbudowanych, wewnętrznych lub zewnętrznych właściwości stylu czcionki.

1. Jak możemy utworzyć pogrubiony tekst za pomocą stylizacji wbudowanej

Za pomocą stylizacji inline możemy zastosować właściwość Font-weight bezpośrednio do konkretnego elementu HTML. Weźmy przykład.

monitor kineskopowy

Kod HTML:

 Document <p>Welcome to javaTpoint</p> <p>This is a bold text</p> 

Wyjście

Wyjaśnienie:

W powyższym kodzie użyliśmy wbudowanego CSS i zastosowaliśmy właściwość czcionki-wagi jako pogrubioną.

2. Jak możemy stworzyć pogrubiony tekst za pomocą stylizacji wewnętrznej

Tutaj musimy zapisać właściwość CSS wewnątrz znacznika head za pomocą znacznika stylu. Weźmy przykład:

Kod HTML:

 Document p { font-weight: bold; } <p>Welcome to javaTpoint</p> <p>This is a bold text</p> 

Wyjście

Wyjaśnienie:

W powyższym kodzie użyliśmy wewnętrznego CSS i zastosowaliśmy właściwość Font-weight.

3. Jak możemy stworzyć pogrubiony tekst za pomocą stylizacji zewnętrznej

Tutaj musimy utworzyć zewnętrzny plik CSS i połączyć go z plikiem HTML. Wewnątrz tego pliku CSS musimy napisać właściwość style. Weźmy przykład.

Kod HTML:

 Document <p>Welcome to javaTpoint</p> <p>This is a bold text</p> 

Kod CSS:

 p { font-weight: bold; } 

Wyjście

podaj nazwę miasta w USA

Wyjaśnienie:

W powyższym kodzie wykorzystaliśmy zewnętrzną właściwość CSS i zaimplementowaliśmy właściwość Font-weight.

Przykład

Zobaczmy, jak utworzyć pogrubiony tekst w różnych odcieniach, korzystając z poniższego przykładu:

 p{ font-size: 20px; } <p>This font is normal.</p> <p>This font is bold.</p> <p>This font is lighter.</p> <p>This font is bolder.</p> <p>This font is 100 weight.</p> <p>This font is 200 weight.</p> <p>This font is 300 weight.</p> <p>This font is 400 weight.</p> <p>This font is 500 weight.</p> <p>This font is 600 weight.</p> <p>This font is 700 weight.</p> <p>This font is 800 weight.</p> <p>This font is 900 weight.</p> 

Wyjście