Przejdź do treści

CSS / Czcionki

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.?

selektor { font: wartości atrybutów }
Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie styló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ąć):
  1. Opcjonalnie dowolna liczba wartości poniższych cech (w dowolnej kolejności, ale zawsze na początku wartości atrybutów w tym poleceniu):
  2. Obowiązkowo wartość font-size
  3. Opcjonalnie wartość line-height poprzedzona znakiem ukośnika ("/")
  4. 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

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

Komentarze

Zobacz więcej komentarzy

Facebook