Właściwość font-weight w CSS3 pozwala na określenie grubości czcionki tekstu. Jest to kluczowy element stylizacji tekstu, umożliwiający tworzenie czytelnych i estetycznie przyjemnych interfejsów użytkownika. Właściwość ta przyjmuje różne wartości, począwszy od cienkich czcionek (light), przez normalne (normal), aż po grube (bold). CSS3 rozszerza możliwości manipulacji grubością czcionki, oferując również numeryczne wartości od 100 do 900, co pozwala na bardziej precyzyjne dostosowanie wagi czcionki.
Przykład zastosowania font-weight
Poniżej znajduje się prosty przykład, który pokazuje, jak można zastosować różne wartości font-weight w HTML i CSS, aby zilustrować ich wpływ na wygląd tekstu.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przykład wykorzystania font-weight w CSS3</title>
<style>
/* Styl dla tekstu normalnego */
.normal {
font-weight: normal;
}
/* Styl dla tekstu pogrubionego */
.bold {
font-weight: bold;
}
/* Styl dla tekstu o wadze 100 */
.light {
font-weight: 100;
}
/* Styl dla tekstu o wadze 900 */
.heavy {
font-weight: 900;
}
</style>
</head>
<body>
<p class="normal">To jest tekst o normalnej grubości.</p>
<p class="bold">To jest tekst pogrubiony.</p>
<p class="light">To jest bardzo lekki tekst.</p>
<p class="heavy">To jest bardzo ciężki tekst.</p>
</body>
</html>
W tym przykładzie zdefiniowaliśmy cztery różne klasy CSS, każda z inną wartością font-weight, aby zobrazować różnice między poszczególnymi grubościami czcionki. Tekst w paragrafach (<p>) jest następnie stylizowany za pomocą tych klas, co pozwala na bezpośrednie porównanie efektów użycia różnych wartości font-weight.
Znaczenie font-weight
Właściwość font-weight jest niezbędna do tworzenia hierarchii wizualnej w tekstach, co jest kluczowe dla poprawy czytelności i estetyki stron internetowych. Pozwala ona projektantom na wyróżnianie ważnych elementów i kierowanie uwagi użytkownika na kluczowe informacje.
Podsumowanie
font-weight w CSS3 to potężne narzędzie do manipulowania wyglądem tekstu na stronach internetowych. Dzięki różnym wartościom tej właściwości, od light po bold, a także precyzyjnym wartościom numerycznym, projektanci mają szerokie możliwości stylizacji i podkreślania ważnych treści. Poprawne zastosowanie font-weight znacząco wpływa na doświadczenia użytkowników, sprawiając, że teksty są nie tylko estetyczne, ale również czytelne i funkcjonalne.
Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video Fullstack w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.