Właściwość CSS Font służy do kontrolowania wyglądu tekstów. Korzystając z właściwości czcionki CSS, możesz zmienić rozmiar tekstu, kolor, styl i wiele więcej. Nauczyłeś się już, jak pogrubiać lub podkreślać tekst. Tutaj dowiesz się również, jak zmienić rozmiar czcionki za pomocą wartości procentowych.
Oto kilka ważnych atrybutów czcionki:
1) Kolor czcionki CSS
Kolor czcionki CSS jest samodzielnym atrybutem CSS, chociaż wydaje się, że jest częścią czcionek CSS. Służy do zmiany koloru tekstu.
Istnieją trzy różne formaty definiowania koloru:
- Według nazwy koloru
- Według wartości szesnastkowej
- Przez RGB
W powyższym przykładzie zdefiniowaliśmy wszystkie te formaty.
body { font-size: 100%; } h1 { color: red; } h2 { color: #9000A1; } p { color:rgb(0, 220, 98); } } <h2>This heading is shown in serif.</h2> <p>This paragraph is written in monospace.</p> Przetestuj teraz Wyjście:
<h2>This heading is shown in sans-serif.</h2> <h3>This heading is shown in serif.</h3> <p>This paragraph is written in monospace.</p>
3) Rozmiar czcionki CSS
Właściwość rozmiaru czcionki CSS służy do zmiany rozmiaru czcionki.
Oto możliwe wartości, których można użyć do ustawienia rozmiaru czcionki:
| Wartość rozmiaru czcionki | Opis |
|---|---|
| xx-mały | używany do wyświetlania bardzo małego rozmiaru tekstu. |
| x-mały | używany do wyświetlania bardzo małego rozmiaru tekstu. |
| mały | używany do wyświetlania małego rozmiaru tekstu. |
| średni | używany do wyświetlania tekstu o średniej wielkości. |
| duży | używany do wyświetlania dużego rozmiaru tekstu. |
| x-duży | używany do wyświetlania bardzo dużego rozmiaru tekstu. |
| xx-duży | używany do wyświetlania bardzo dużego rozmiaru tekstu. |
| mniejszy | używany do wyświetlania stosunkowo mniejszego rozmiaru tekstu. |
| większy | używany do wyświetlania stosunkowo większego rozmiaru tekstu. |
| rozmiar w pikselach lub% | używany do ustawiania wartości w procentach lub w pikselach. |
Practice CSS font-size property <p> This font size is extremely small.</p> <p> This font size is extra small</p> <p> This font size is small</p> <p> This font size is medium. </p> <p> This font size is large. </p> <p> This font size is extra large. </p> <p> This font size is extremely large. </p> <p> This font size is smaller. </p> <p> This font size is larger. </p> <p> This font size is set on 200%. </p> <p> This font size is 20 pixels. </p>Przetestuj teraz
Wyjście:
Ten rozmiar czcionki jest wyjątkowo mały.
Ten rozmiar czcionki jest wyjątkowo mały
Ten rozmiar czcionki jest mały
Ten rozmiar czcionki jest średni.
3 miesiące
Ten rozmiar czcionki jest duży.
Ten rozmiar czcionki jest bardzo duży.
Ten rozmiar czcionki jest niezwykle duży.
Ten rozmiar czcionki jest mniejszy.
Ten rozmiar czcionki jest większy.
Ten rozmiar czcionki jest ustawiony na 200%.
programowanie stdin c
Rozmiar czcionki wynosi 20 pikseli.
4) Styl czcionki CSS
Właściwość stylu czcionki CSS określa, jaki typ czcionki chcesz wyświetlić. Może być kursywą, ukośną lub normalną.
body { font-size: 100%; } h2 { font-style: italic; } h3 { font-style: oblique; } h4 { font-style: normal; } } <h2>This heading is shown in italic font.</h2> <h3>This heading is shown in oblique font.</h3> <h4>This heading is shown in normal font.</h4> Przetestuj teraz Wyjście:
<h2>This heading is shown in italic font.</h2> <h3>This heading is shown in oblique font.</h3> <h4>This heading is shown in normal font.</h4>
5) Wariant czcionki CSS
Właściwość wariantu czcionki CSS określa sposób ustawienia wariantu czcionki elementu. Mogą to być zwykłe i małe spółki.
p { font-variant: small-caps; } h3 { font-variant: normal; } <h3>This heading is shown in normal font.</h3> <p>This paragraph is shown in small font.</p> Przetestuj teraz Wyjście:
<h3>This heading is shown in normal font.</h3> <p>This paragraph is shown in small font.</p>
6) Grubość czcionki CSS
Właściwość wagi czcionki CSS definiuje wagę czcionki i określa, jak pogrubiona jest czcionka. Możliwe wartości grubości czcionki mogą być normalne, pogrubione, pogrubione, jaśniejsze lub liczbowe (100, 200... do 900).
Ta czcionka jest pogrubiona.
Ta czcionka jest odważniejsza.
Ta czcionka jest jaśniejsza.
Ta czcionka ma wagę 100.
Ta czcionka ma wagę 200.
Ta czcionka ma wagę 300.
Ta czcionka ma wagę 400.
Ta czcionka ma wagę 500.
Ta czcionka ma wagę 600.
Ta czcionka ma wagę 700.
Ta czcionka ma wagę 800.
Ta czcionka ma wagę 900.
Przetestuj terazWyjście:
Ta czcionka jest pogrubiona.
co to jest głośnik
Ta czcionka jest odważniejsza.
Ta czcionka jest jaśniejsza.
Ta czcionka ma wagę 100.
Ta czcionka ma wagę 200.
Ta czcionka ma wagę 300.
Ta czcionka ma wagę 400.
Ta czcionka ma wagę 500.
Ta czcionka ma wagę 600.
Ta czcionka ma wagę 700.
Ta czcionka ma wagę 800.
Ta czcionka ma wagę 900.