CSS oferuje wiele właściwości do dostosowania wyglądu tekstu. Obejmują one wybór czcionki, stylu czcionki oraz cieniowania.
W ramach właściwości CSS dotyczących tekstu obejmujących wybór czcionki, stylu czcionki i kroju czcionki. Te właściwości są oczywiście użyteczne głównie dla elementów HTML zawierających tekst (p, i itp.). Mogą być również stosowane dla tabel.
Przy użyciu atrybutu font-family można określić używaną czcionkę.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
p {font-family:verdana, sans-serif;}
h1 { font-family:"Courier New", Courier, monospace; }
</style>
</head>
<body>
<div>
<h1>PSD-Tutorials.de</h1>
<p>Das ist ein Absatz mit einem <strong>fetten Wort</strong>.</p>
<h2>Das ist eine Überschrift mit einem <strong>fetten Wort</strong>.</h2>
</div>
</body>
</html>Wynik w przeglądarce będzie wyglądał następująco:
Przykładowe czcionki to na przykład Arial, Helvetica i Times Roman. Atrybut CSS font-family służy do określenia preferowanych czcionek. Podając kilka czcionek, ważna jest kolejność. Jeśli pierwsza z podanych czcionek jest dostępna, zostanie ona użyta. Wybrane czcionki oddzielamy przecinkami. Ostatnim elementem zwykle jest tzw. rodzina czcionek ogólna. Dzięki takiemu wyborowi przeglądarka ma możliwość wybrania czcionki podobnej do wybranej.
• serif = czcionka ze szeryfami
• sans-serif = czcionka bez szeryfów
• cursive = czcionka kursywa
• fantasy = czcionka fantazyjna
• monospace = czcionka o stałej szerokości znaków
Styl czcionki
Za pomocą atrybutu font-style można określić styl czcionki. Jeśli wybrana czcionka to umożliwia, za pomocą wartości italic można wymusić kursywę.
Inne czcionki można odchylić za pomocą oblique. Kolejna właściwość CSS, która wpływa na wygląd tekstu, to font-variant. Za pomocą niej można zdefiniować tzw. kapitaliki.
Aby to zrobić, należy ustawić wartość small-caps za pomocą atrybutu font-variant.
Rozmiar czcionki
Bardzo ważnym elementem jest również podanie rozmiaru czcionki. CSS udostępnia właściwość font-size. Rozmiar czcionki można podać w różnych jednostkach.
• EM
• REM
• Piksel
• Procent
• Słowa kluczowe
Jako słowa kluczowe dostępne są następujące warianty:
• xx-small – bardzo, bardzo mała
• x-small – bardzo mała
• small – mała
• smaller – mniejsza niż w elemencie nadrzędnym
• medium – średnia
• large – duża
• x-large – bardzo duża
• xx-large – bardzo, bardzo duża
• larger – większa niż w elemencie nadrzędnym
Oto przykład, jak zdefiniować rozmiar czcionki:
.eins {font-size: 10px;}
.zwei {font-size: 20px;}
.drei {font-size: 110%;}
.vier {font-size: xx-large;}A oto jak to wygląda w przeglądarce:
Pamiętajcie, że określenie rozmiaru czcionki jest skomplikowane, ponieważ różne jednostki mają swoje zalety i wady.
Żeby dowiedzieć się, którą jednostkę najlepiej użyć w danym przypadku, zapraszamy na stronę http://www.soeren-hentzschel.at/technik/programmierung/2011/01/16/px-pt-em-welches-ist-das-richtige-mas-fur-schrift/. Dla tych, którzy nie chcą czytać całego tekstu, ważne jest używanie wartości względnych, takich jak em dla wyświetlania na ekranie. Dla layoutów drukarskich należy natomiast korzystać z jednostek bezwzględnych, takich jak pt.
Grubość czcionki
Kolejnym elementem do rozważenia jest tzw. grubość czcionki. Za pomocą tego definiuje się grubość i wygląd czcionki. Do tego celu służy właściwość font-weight.
.fett {
font-weight:bold;
}
Z tą składnią tekst oznaczony jest jako pogrubiony.
Możliwe wartości to bold (pogrubienie), bolder (bardziej pogrubione), lighter (cieńsze) oraz normal. Dozwolone są również wartości liczbowe 100, 200, 300, 400, 500, 600, 700, 800 i 900. Odpowiadają one od bardzo cienkiej (100) do bardzo pogrubionej (900).
Podsumowanie definicji
W kontekście definicji czcionek ważną rolę odgrywa również właściwość line-height, dzięki której można zdefiniować wysokość wiersza. Na razie nie omawiam jej szczegółowo. Musi być tutaj wymieniona, ponieważ odgrywa pewną rolę w kontekście właściwości font, która zostanie przedstawiona poniżej.
Możecie łączyć ze sobą dotychczas przedstawione informacje dotyczące wyświetlania tekstu. Do tego służy ogólna właściwość font. Obejmuje ona następujące informacje lub je uwzględnia.
• font-style
• font-variant
• font-weight
• font-size
• line-height
• font-family
Przy użyciu font można łączyć ze sobą różne formatowania czcionek. Możecie podać wcześniej wspomniane właściwości lub niektóre z nich, ale nie musicie używać ich wszystkich. Obowiązkowe są jednak właściwości dotyczące rozmiaru czcionki i rodziny czcionek.
Dzięki skróconemu zapisowi można utrzymać pliki CSS krótsze i bardziej czytelne.
Należy jednak zachować kolejność, jak przedstawiono poniżej. Jeśli są odnotowane dwie właściwości font-size i line-height, należy je oddzielić ukośnikiem. Jeśli jest podany tylko jeden wartość, oznacza to font-size.
Przykład:
p {
font: italic small-caps bold 1.3em/1.5em Georgia,Times,serif;
}font-size-adjust zostało opracowane, aby umożliwić prawie takie same wyświetlanie czcionek. Różne czcionki o jednakowej wysokości liter mają różne wysokości "x". Jednakże czcionki z większym "x" są łatwiejsze do odczytania. W rezultacie dokument może być trudny do odczytania, jeśli oryginalna czcionka nie jest dostępna i zostanie zastąpiona inną z mniejszym "x". Dzięki font-size-adjust ten różnica ma możliwość zostać zrównana.
Przykład:
h1 {
font-family: Verdana,
'Times New Roman', 'Courier New';
font-size-adjust: 0.61;
}
W następnym samouczku poznasz kolejne możliwości dostosowania wyglądu tekstu na swojej stronie internetowej.
