Właściwość CSSTypografia
font-style
Włącza kursywę lub pochylenie tekstu.
- Wartość domyślna
normal- Dziedziczona
- Tak
- Animowalna
- tylko kąt pochylenia oblique
- Dotyczy
- wszystkie elementy
- JavaScript
element.style.fontStyle = "italic"
Przykład
#CSS
blockquote {
font-style: italic;
}
blockquote cite {
font-style: normal;
}HTML przykładu
<blockquote style="font-style: italic; margin: 0">
„Najlepszy sposób, żeby nauczyć się kodować, to kodować.”
<cite style="font-style: normal; display: block; margin-top: 6px; color: #a3a3a3;">Mentor CodeWorlds</cite>
</blockquote>Podgląd
Definicja i zastosowanie
#Właściwość font-style wybiera krój prosty, kursywę albo pochylenie. italic używa prawdziwej kursywy, czyli osobno zaprojektowanych znaków. oblique to pochylona wersja zwykłych znaków, opcjonalnie z podanym kątem.
Jeśli krój nie ma wersji kursywnej, przeglądarka pochyli zwykłe znaki automatycznie. Efekt bywa mniej elegancki niż prawdziwa kursywa.
Znaczniki <em> i <i> mają domyślnie font-style: italic. Wartość normal przydaje się, gdy chcesz tę kursywę wyłączyć.
Składnia
#Składnia
font-style: normal | italic | oblique <kąt>?;Wartości
#- Zwykły, prosty krój bez pochylenia.
- Prawdziwa kursywa zaprojektowana w kroju.
- Pochylenie zwykłych znaków.
- Pochylenie o podany kąt, jeśli krój to obsługuje.
Wartości w praktyce
#normal
Zwykły, prosty krój bez pochylenia.
.demo { font-style: normal; }italic
Prawdziwa kursywa zaprojektowana w kroju.
.demo { font-style: italic; }oblique
Pochylenie zwykłych znaków.
.demo { font-style: oblique; }oblique 20deg
Pochylenie o podany kąt, jeśli krój to obsługuje.
.demo { font-style: oblique 20deg; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Kursywa jest trudniejsza w czytaniu. Używaj jej do krótkich wyróżnień, nie do całych akapitów.
- Jeśli dołączasz własną czcionkę, pobierz też jej kursywę, zamiast polegać na sztucznym pochyleniu.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.