Atrybuty mieszane czcionki {font}
W jaki sposób określić w jednym poleceniu wiele własności czcionki: styl, wariant, wagę, rozmiar, krój, a także wysokość linii? Jak ustawić czcionkę systemową, tzn. taką jak używana na przyciskach, paskach narzędzi, menu itp.?
Atrybuty mieszane czcionki {font}
selektor { font: wartości atrybutów }Natomiast jako "wartości atrybutów" należy wpisać wybrane wartości cech dotyczących czcionek, które będą oddzielone od siebie spacjami. Należy je wpisywać w następującej kolejności (przy czym można niektóre pominąć):
- Opcjonalnie dowolna liczba wartości poniższych cech (w dowolnej kolejności, ale zawsze na początku wartości atrybutów w tym poleceniu):
- font-style
- font-variant - w tym poleceniu obsługiwane są tylko wartości: normal i small-caps
- font-weight
- font-stretch - w tym poleceniu obsługiwane jest dopiero w CSS 3
- Obowiązkowo wartość font-size
- Opcjonalnie wartość line-height poprzedzona znakiem ukośnika ("/")
- Obowiązkowo wartość font-family
Zmiana kolejności może (ale nie musi) spowodować, że atrybut taki nie zostanie uznany. Ponadto przed wartością atrybutu line-height (wysokość linii) należy obowiązkowo postawić ukośnik. Obowiązkowo należy podać wartości przynajmniej dla font-size i font-family - w takiej kolejności.
Polecenie to pozwala w wygodny sposób zdefiniować wszystkie atrybuty dotyczące czcionek. Już nie musimy wypisywać kolejno wszystkich cech, a jedynie ich konkretne wartości. Wartością może być np.: italic (font-style), 12pt (font-size) czy 'Times New Roman' (font-family). Wszystkie wartości należy wpisywać w określonej kolejności (przy czym można niektóre pominąć), a także oddzielić je od siebie spacjami. Dodatkowo przed line-height (wysokość linii) należy obowiązkowo postawić ukośnik (ponieważ atrybuty font-size oraz line-height mogą przyjmować takie same wartości, a więc musimy je jakoś od siebie odróżnić). Nie ma wymogu, aby podawać w tej deklaracji pełną listę cech składowych, jednak jeśli jakąś opuścimy, zostanie jej przypisana wartość domyślna. Dlatego poniższa reguła stylów nie ustawi pogrubionej czcionki (bold), ponieważ nie zostało to określone w deklaracji font, która tutaj unieważnia font-weight:
p {
font-weight: bold;
font: 12pt Arial;
}Zgodnie z zasadą kaskadowości oczekiwany skutek (pogrubiony tekst) odniesiemy podając deklaracje w odwrotnej kolejności:
p {
font: 12pt Arial;
font-weight: bold;
}albo przenosząc wartość font-weight (bold) do zbiorczej deklaracji font:
p {
font: bold 12pt Arial;
}Przykład {font}
Po wpisaniu:<p style="font: italic small-caps bold 12pt /1cm 'Times New Roman',Verdana,'MS Sans Serif'"> To jest paragraf napisany pismem pochyłym, z małymi kapitałkami, pogrubiony, o wielkości czcionki 12 punktów, wysokości linii 1 centymetr oraz rodzinie czcionek 'Times New Roman', Verdana lub 'MS Sans Serif'. </p>otrzymamy na ekranie:
To jest paragraf napisany pismem pochyłym, z małymi kapitałkami, pogrubiony, o wielkości czcionki 12 punktów, wysokości linii 1 centymetr oraz rodzinie czcionek 'Times New Roman', Verdana lub 'MS Sans Serif'.
Zauważ, że w definicji wpisujemy same wartości atrybutów (bez kolejnych cech), a dodatkowo przed wysokością linii należy postawić ukośnik.Czcionki systemowe {font: caption icon menu message-box small-caption status-bar}
Jako "wartości atrybutów" własności font można podać:
- caption - czcionka używana do podpisanych kontrolek (np. przycisków, rozwijalnych list)
- icon - czcionka etykiet ikon
- menu - menu
- message-box - okna dialogowe
- small-caption - etykiety małych kontrolek
- status-bar - pasek statusu okna
Przykład {font: caption icon menu small-caption status-bar}
font: caption
font: icon
font: menu
font: message-box
font: small-caption
font: status-bar
Przeglądarki
 Chrome |  Firefox |  Edge |  Opera |  Safari | |
|---|---|---|---|---|---|
font: wartość | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 3.5 1998-11-18 | 1 2003-06-23 |
font: caption | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 6 2001-12-18 | 1 2003-06-23 |
font: icon | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 6 2001-12-18 | 1 2003-06-23 |
font: menu | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 6 2001-12-18 | 1 2003-06-23 |
font: message-box | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 6 2001-12-18 | 1 2003-06-23 |
font: small-caption | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 6 2001-12-18 | 1 2003-06-23 |
font: status-bar | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 6 2001-12-18 | 1 2003-06-23 |
