Przykład
Określić wszystkie właściwości czcionki w jednej deklaracji:
p.ex1
{
font: 15px arial, sans-serif;
}
p.ex2
{
font: italic bold 12px/30px Georgia, serif;
}
Spróbuj sam " Więcej "Try it Yourself" przykłady poniżej.
Definicja i Wykorzystanie
Czcionka skróconą własnością ustawia wszystkie właściwości czcionki w jednej deklaracji.
Właściwości, które mogą być ustawione, to (in order) : "font-style font-variant font-weight font-size/line-height font-family"
Wymagane są font-size oraz font-family wartości. Jeśli jedna z innymi wartościami brakuje, wartości domyślne zostanie wstawiony, jeśli w ogóle.
Note: Właściwość line-height ustawia odstęp między liniami.
| Domyślna wartość: | The default value of all the font properties |
|---|---|
| Dziedziczny: | yes |
| Animatable: | yes, see individual properties . Read about animatable Try it |
| Wersja: | CSS1 |
| Składnia JavaScript: | object .style.font="italic small-caps bold 12px arial,sans-serif" Try it |
Pomoc Browser
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje właściwość.
| Nieruchomość | |||||
|---|---|---|---|---|---|
| font | 1,0 | 4,0 | 1,0 | 1,0 | 3,5 |
Uwaga: Patrz indywidualne wsparcie przeglądarki dla każdej wartości poniżej.
Składnia CSS
font:font-stylefont-variantfont-weightfont-size/line-height
font-family |caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;wartości nieruchomości
| Wartość nieruchomości | Opis |
|---|---|
| font-style | Określa styl czcionki. Domyślną wartością jest "normal" . Zobacz font-style dla możliwych wartości |
| font-variant | Określa wariant czcionki. Domyślną wartością jest "normal" . Zobacz font-variant dla możliwych wartości |
| font-weight | Określa wagę czcionki. Domyślną wartością jest "normal" . Zobacz font-weight dla możliwych wartości |
| font-size/line-height | Określa rozmiar czcionki i line-height. Domyślną wartością jest "normal" . Patrz rozmiar czcionki i line-height dla możliwych wartości |
| font-family | Określa rodzinę czcionek. Wartość domyślna zależy od przeglądarki. Zobacz font-family dla możliwych wartości |
| caption | Wykorzystuje czcionki, które są używane przez zatytułowane kontroli (jak guziki, drop-upadki, itp) |
| icon | Używa czcionki, które są używane przez etykiet ikon |
| menu | Korzysta z czcionek, które są wykorzystywane przez menu rozwijanych |
| message-box | Korzysta z czcionek, które są wykorzystywane przez oknach dialogowych |
| small-caption | Mniejsza wersja czcionki napisów |
| status-bar | Korzysta z czcionek, które są wykorzystywane przez pasku stanu |
| initial | Ustawia tę właściwość na wartość domyślną. Przeczytaj o początkowej |
| inherit | Dziedziczy nieruchomość od swojego rodzica. Przeczytaj o dziedziczą |
Więcej przykładów
Przykład
Demonstracja niektórych innych wartości majątkowych czcionki.
<p style="font:caption">The browser font used in captioned controls.</p>
<p style="font:icon">The browser font used in icon labels.</p>
<p
style="font:menu">The browser font used in dropdown menus.</p>
<p
style="font:message-box">The browser font used in dialog boxes.</p>
<p
style="font:small-caption">A smaller version of the caption font.</p>
<p
style="font:status-bar">The browser font used in the status bar.</p> Spróbuj sam " Podobne strony
Kurs CSS: CSS czcionki
HTML DOM referencyjny: font property