Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Właściwości czcionki

Email Drukuj PDF

Tematy: Rodzina czcionek | Rozmiar czcionki | Waga czcionki | Styl czcionki | Warianty czcionki | Zbiorczy zapis właściwości czcionek

Jedną z najważniejszych funkcji oferowanych przez kaskadowe arkusze stylów jest możliwość formatowania wyglądu czcionki użytej do skomponowania strony. Za pomocą CSS możemy określić rodzaj czcionki, jej wielkość, styl, wagę oraz kilka innych elementów.

Rodzina czcionek

font-family

Dostępne wartości:

nazwa własna czcionki | serif | sans-serif | monospace | fantasy | cursive | inherit

Wartość domyślna:

domyślne ustawienie przeglądarki oglądającego witrynę

Przykład:

p{font-family:arial, helvetica, verdana, sans-serif;}

Dziedziczenie:

Tak

Obsługa:

Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari

Pierwszą właściwością czcionki użytej na stronie jest jej przynależność do określonej rodziny. Dokładnie mówiąc, chodzi o to, jaka czcionka zostanie zastosowana do wyświetlenia tekstu. Jeżeli chcesz, by tekst akapitów został pokazany za pomocą konkretnej czcionki, np. Arial, Verdana czy Courier, to odpowiednie polecenie w arkuszu stylów powinno przybrać następującą postać:

<p style="font-family:arial;">Przykładowy tekst akapitu wyświetlony za pomocą czcionki Arial.</p>

<p style="font-family:verdana;">Przykładowy tekst akapitu wyświetlony za pomocą czcionki Verdana.</p>

<p style="font-family:courier;">Przykładowy tekst akapitu wyświetlony za pomocą czcionki Courier.</p>

<<przykład>>

<div class="przyklad">

<p style="font-family:arial;">Przykładowy tekst akapitu wyświetlony za pomocą czcionki Arial.</p>

<p style="font-family:verdana;">Przykładowy tekst akapitu wyświetlony za pomocą czcionki Verdana.</p>

<p style="font-family:courier;">Przykładowy tekst akapitu wyświetlony za pomocą czcionki Courier.</p>

</div>

<</przykład>>

Można zadeklarować kilka rodzajów czcionek dla jednego dokumentu. Oczywiście byłoby dobrze, gdyby wybrane czcionki były do siebie podobne, gdyż pozwoli to na zachowanie spójnego wyglądu serwisu.

 BODY

{

font-family:arial, helvetica, verdana;

}

Należy pamiętać o tym, że poszczególne nazwy powinny być rozdzielone za pomocą przecinka. Jest to konieczne dla zachowania poprawności składni arkusza.

Jeżeli internauta wejdzie na stronę, dla której projektant w taki sposób określił rodzaj czcionki zalecanej do wyświetlenia dokumentu, to w sytuacji, gdy w systemie nie została zainstalowana czcionka o nazwie Arial, przeglądarka spróbuje użyć czcionki Helvetica, a jeżeli tej również nie będzie, to kolejna próba zostanie podjęta z czcionką o nazwie Verdana. Dopiero po wyczerpaniu wszystkich możliwości tekst zostanie sformatowany za pomocą domyślnej czcionki przeglądarki.

W przypadku gdy wykorzystywane są czcionki o nazwach wieloczłonowych, np. Times New Roman, koniecznie należy ująć taką nazwę w pojedynczy cudzysłów.

BODY

{

font-family: 'Times New Roman';

}

Specyfikacja kaskadowych arkuszy stylów pozwala na deklarowanie czcionek na podstawie nazwy rodzajowej. Osoby mające do czynienia ze składem tekstu (DTP) na pewno doskonale znają pojęcia serif, sans-serif, monospace, cursive oraz fantasy. Nazwy te odpowiadają konkretnym rodzajom czcionek.

Czcionki określane mianem serif są proporcjonalne, gdyż każda litera ma inną szerokość — wystarczy porównać np. literę „m” z literą „l”. Dodatkowo każda czcionka z rodziny serif posiada ozdobniki zwane szeryfami. Typową czcionką należącą do grupy rodzajowej serif jest Times New Roman.

<h1 style="font-family:serif;">NAGŁÓWEK - czcionka serif</h1>

Druga grupa czcionek to sans-serif. Te czcionki również są proporcjonalne. Różnica polega na braku ozdobników w czcionce. Przykładem czcionek należących do tej grupy mogą być Arial, Helvetica oraz Verdana.

<h1 style="font-family:sans-serif;">NAGŁÓWEK - czcionka sans-serif</h1>

Kolejna grupa to monospace. Czcionki tego typu są nieproporcjonalne, co oznacza, że każda litera ma taką samą szerokość (np. „m” ma taką samą szerokość jak „l”). Ten rodzaj czcionek jest doskonale znany z maszyn do pisania bądź starych drukarek igłowych. Ciekawą cechą tego rodzaju pisma jest fakt, że czcionka może mieć szeryf lub nie. Przykładem tego rodzaju czcionki jest Courier New.

<h1 style="font-family:monospace;">NAGŁÓWEK - czcionka monospace</h1>

Następna grupa rodzajowa czcionek to cursive. Nie należy mylić tej nazwy z tekstem pochyłym, czyli kursywą, gdyż ta grupa rodzajowa obejmuje wszystkie czcionki, które są podobne do pisma odręcznego. Innymi słowy, mogą one zawierać różne dziwne ozdobniki w postaci zawijasów. Przykładowa czcionka cursive to Comic Sans MS lub Monotype Cursiva.

<h1 style="font-family:cursive;">NAGŁÓWEK - czcionka cursive</h1>

Ostatnia grupa nosi nazwę fantasy i zawiera czcionki, których nie da się zaklasyfikować do żadnego z pozostałych stylów rodzajowych. Przykładowa czcionka to np. Dziurki Sto, której osobiście nie potrafię zaklasyfikować nigdzie indziej.

<<przykład>>

<div class="przyklad">

<h1 style="font-family:serif;">NAGŁÓWEK - czcionka serif</h1>

<h1 style="font-family:sans-serif;">NAGŁÓWEK - czcionka sans-serif</h1>

<h1 style="font-family:monospace;">NAGŁÓWEK - czcionka monospace</h1>

<h1 style="font-family:cursive;">NAGŁÓWEK - czcionka cursive</h1>

<h1 style="font-family:fantasy;">NAGŁÓWEK - czcionka fantasy</h1>

</div>

<</przykład>>

Przyjrzyjmy się jeszcze jednej deklaracji stylu, jaką można zastosować przy tworzeniu strony WWW.

BODY

{

font-family:arial, helvetica, verdana, sans-serif;

}

W takim przypadku, jeżeli przeglądarka nie znajdzie w komputerze użytkownika żadnej z zadeklarowanych czcionek, użyje dowolnej czcionki należącej do gatunku sans-serif. Dlatego warto — a nawet należy — przy określaniu rodzaju czcionki na stronie stosować nazwy własne kilku czcionek oraz nazwę gatunkową, dzięki czemu zwiększamy prawdopodobieństwo, iż strona będzie poprawnie wyglądała niezależnie od systemu operacyjnego i różnic w dostępnych czcionkach.

W specyfikacji CSS 2.1 wprowadzono dodatkowe funkcje umożliwiające wykorzystanie czcionek systemowych do prezentacji tekstu na stronie. Zapis w arkuszu stylów nieznacznie się różni i przybiera następującą postać:

<p style="font:caption;">Fragment tekstu - czcionka caption</p>

Poniżej znajduje się wykaz wszystkich wartości odpowiadających czcionkom systemowym.

<p style="font:caption;">Fragment tekstu - czcionka caption</p>

<p style="font:icon;">Fragment tekstu - czcionka icon</p>

<p style="font:menu;">Fragment tekstu - czcionka menu</p>

<p style="font:message-box;">Fragment tekstu - czcionka message-box</p>

<p style="font:small-caption;">Fragment tekstu - czcionka small-caption</p>

<p style="font:menu-bar;">Fragment tekstu - czcionka menu-bar</p>

<<przykład>>

<div class="przyklad">

<p style="font:caption;">Fragment tekstu - czcionka caption</p>

<p style="font:icon;">Fragment tekstu - czcionka icon</p>

<p style="font:menu;">Fragment tekstu - czcionka menu</p>

<p style="font:message-box;">Fragment tekstu - czcionka message-box</p>

<p style="font:small-caption;">Fragment tekstu - czcionka small-caption</p>

<p style="font:menu-bar;">Fragment tekstu - czcionka menu-bar</p>

</div>

<</przykład>>

Rozmiar czcionki

font-size

Dostępne wartości:

rozmiar absolutny | rozmiar względny | rozmiar procentowy | xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | inherit

Wartość domyślna:

medium

Przykład:

p{font-size:20pt;}

Dziedziczenie:

Tak

Obsługa:

Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari

Kolejnym udogodnieniem oferowanym przez kaskadowe arkusze stylów, często stosowanym, jest możliwość dowolnego definiowania rozmiaru czcionki użytej na stronie. Można ustawiać wysokość czcionek we wszystkich elementach występujących na stronie — listach, nagłówkach, akapitach, tabelach itp.

<p style="font-size:20pt;">Fragment tekstu o wysokości 20pt.</p>

<h1 style="font-size:1cm;">Nagłówek o wysokości 30px.</h1>

<<przykład>>

<div class="przyklad">

<p style="font-size:20pt;">Fragment tekstu o wysokości 20pt.</p>

<h1 style="font-size:30px;">Nagłówek o wysokości 30px.</h1>

</div>

<</przykład>>

Do określania wysokości tekstu można używać jednostek względnych oraz bezwzględnych.

DIV

{

font-size:20pt;

}

.wiekszy

{

font-size:40pt;

}

.procenty

{

font-size:200%;

}

<<przykład>>

<div class="przyklad" style="font-size:20pt;">

<p>Tekst domyślny o wysokości 20pt</p>

<p style="font-size: 40pt;">Tekst o wysokości 40pt</p>

<p style="font-size: 200%;">Tekst o wysokości 200%</p>

</div>

<</przykład>>

Oprócz opisanych powyżej sposobów określania wielkości tekstu można również używać domyślnie zdefiniowanych wielkości. W specyfikacji zostało przewidzianych siedem nazw dla wielkości absolutnych: xx-small, x-small, small, medium, large, x-large, xx-large oraz dwie dla wartości relatywnych — względem domyślnego rozmiaru czcionki — smaller i larger.

<p style="font-size:xx-small;">Przykładowy tekst - xx-small</p>

<p style="font-size:x-small;">Przykładowy tekst - x-small</p>

<p style="font-size:small;">Przykładowy tekst - small</p>

<p style="font-size:medium;">Przykładowy tekst - medium</p>

<p style="font-size:large;">Przykładowy tekst - large</p>

<p style="font-size:x-large;">Przykładowy tekst - x-large</p>

<p style="font-size:xx-large;">Przykładowy tekst - xx-large</p>

<p style="font-size:smaller;">Przykładowy tekst - smaller</p>

<p style="font-size:larger;">Przykładowy tekst - larger</p>

<<przykład>>

<div class="przyklad">

<p style="font-size:xx-small;">Przykładowy tekst - xx-small</p>

<p style="font-size:x-small;">Przykładowy tekst - x-small</p>

<p style="font-size:small;">Przykładowy tekst - small</p>

<p style="font-size:medium;">Przykładowy tekst - medium</p>

<p style="font-size:large;">Przykładowy tekst - large</p>

<p style="font-size:x-large;">Przykładowy tekst - x-large</p>

<p style="font-size:xx-large;">Przykładowy tekst - xx-large</p>

<p style="font-size:smaller;">Przykładowy tekst - smaller</p>

<p style="font-size:larger;">Przykładowy tekst - larger</p>

</div>

<</przykład>>

Zależności pomiędzy poszczególnymi wielkościami są określone przez współczynnik, jednak jego interpretacja przez przeglądarki — zwłaszcza te starsze — bywała różna. Wartość tego współczynnika zgodnie ze specyfikacją CSS wynosi 1,5, jeżeli posuwamy się do góry, lub 0,66, patrząc w dół.

Waga czcionki

font-weight

Dostępne wartości:

normal | bold |100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | bolder | lighter | inherit

Wartość domyślna:

normal

Przykład:

p{font-weight:bold;}

Dziedziczenie:

Tak

Obsługa:

Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari

Uwaga, nie można mylić wagi czcionki z jej faktycznym ciężarem, gdyż tym razem jest to określenie tego, czy czcionka ma być prezentowana jako pogrubiona, czy też nie. Kaskadowe arkusze stylów oferują kilka grubości tekstu.

<p style="font-weight:normal;">Przykładowy tekst o domyślnej wadze - normal</p>

<p style="font-weight:bold;">Przykładowy tekst z pogrubieniem o wadze bold</p>

<p style="font-weight:100;">Przykładowy tekst z pogrubieniem o wadze 100</p>

<p style="font-weight:200;">Przykładowy tekst z pogrubieniem o wadze 200</p>

<p style="font-weight:300;">Przykładowy tekst z pogrubieniem o wadze 300</p>

<p style="font-weight:400;">Przykładowy tekst z pogrubieniem o wadze 400</p>

<p style="font-weight:500;">Przykładowy tekst z pogrubieniem o wadze 500</p>

<p style="font-weight:600;">Przykładowy tekst z pogrubieniem o wadze 600</p>

<p style="font-weight:700;">Przykładowy tekst z pogrubieniem o wadze 700</p>

<p style="font-weight:800;">Przykładowy tekst z pogrubieniem o wadze 800</p>

<p style="font-weight:900;">Przykładowy tekst z pogrubieniem o wadze 900</p>

<<przykład>>

<div class="przyklad">

<p style="font-weight:normal;">Przykładowy tekst o domyślnej wadze - normal</p>

<p style="font-weight:bold;">Przykładowy tekst z pogrubieniem o wadze bold</p>

<p style="font-weight:100;">Przykładowy tekst z pogrubieniem o wadze 100</p>

<p style="font-weight:200;">Przykładowy tekst z pogrubieniem o wadze 200</p>

<p style="font-weight:300;">Przykładowy tekst z pogrubieniem o wadze 300</p>

<p style="font-weight:400;">Przykładowy tekst z pogrubieniem o wadze 400</p>

<p style="font-weight:500;">Przykładowy tekst z pogrubieniem o wadze 500</p>

<p style="font-weight:600;">Przykładowy tekst z pogrubieniem o wadze 600</p>

<p style="font-weight:700;">Przykładowy tekst z pogrubieniem o wadze 700</p>

<p style="font-weight:800;">Przykładowy tekst z pogrubieniem o wadze 800</p>

<p style="font-weight:900;">Przykładowy tekst z pogrubieniem o wadze 900</p>

</div>

<</przykład>>

Niestety mimo licznych wartości dla wagi czcionki przeglądarki nie różnicują ich aż tak dokładnie. Większość przeglądarek rozróżnia wartości normal, bold, a dla wag określonych za pomocą wartości od 100 do 500 stosuję czcionki o wadze normalnej — niepogrubione. Natomiast dla wartości od 600 do 900 czcionka jest pogrubiona. Należy również pamiętać o tym, że Opera oraz Chrome wartość 600 wyświetlają czcionką bardziej pogrubioną, niż ma to miejsce np. dla wartości 900

Wagę czcionki można również określać na zasadzie relacji do domyślnego stanu rzeczy dla formatowanego elementu.

<p>Przykładowy tekst o domyślnej wadze.</p>

<p style="font-weight:bolder;">Przykładowy tekst o domyślnej wadze.</p>

 

<h1>Nagłówek o domyślnej wadze</h1>

<h1 style="font-weight:lighter;">Nagłówek o wadze lighter</h1>

<<przykład>>

<div class="przyklad">

<h1>Nagłówek o domyślnej wadze</h1>

<h1 style="font-weight:lighter;">Nagłówek o wadze lighter</h1>

<hr>

<p>Przykładowy tekst o domyślnej wadze.</p>

<p style="font-weight:bolder;">Przykładowy tekst o domyślnej wadze.</p>

</div>

<</przykład>>

Styl czcionki

font-style

Dostępne wartości:

normal | italic | oblique | inherit

Wartość domyślna:

normal

Przykład:

p{font-style:italic;}

Dziedziczenie:

Tak

Obsługa:

Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari

Czcionka publikowana na stronie WWW, poddana procesowi formatowania za pomocą kaskadowych arkuszy stylów, może zmieniać swój styl. Specyfikacja określa trzy rodzaje stylów czcionki.

<p style="font-weight:normal;">Przykładowy tekst ze stylem normal</p>

<p style="font-style:italic;">Przykładowy tekst ze stylem italic</p>

<p style="font-style:oblique;">Przykładowy tekst ze stylem oblique</p>

<<przykład>>

<div class="przyklad">

<p style="font-weight:normal;">Przykładowy tekst ze stylem normal</p>

<p style="font-style:italic;">Przykładowy tekst ze stylem italic</p>

<p style="font-style:oblique;">Przykładowy tekst ze stylem oblique</p>

</div>

<</przykład>>

Drugi i trzeci styl (italic oraz oblique) przez wszystkie przeglądarki wyświetlane są tak samo — jako tekst pochyły. Jednak w DTP możemy wyróżnić kilka rodzajów tekstu pochyłego i stąd to rozróżnienie w specyfikacji CSS.

Pamiętaj o tym, żeby podczas składania strony i stosowania czcionki pochyłej sprawdzić uzyskany efekt na kilku przeglądarkach. Weź również pod uwagę fakt, że bardzo często czcionka pochyła jest mniej czytelna niż prosta czy pogrubiona lub podkreślona.

Warianty czcionki

font-variant

Dostępne wartości:

normal | small-caps | inherit

Wartość domyślna:

normal

Przykład:

p{font-variant:smal-caps;}

Dziedziczenie:

Tak

Obsługa:

Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari

Pod pojęciem „wariant czcionki” w kaskadowych arkuszach stylów kryją się kapitaliki. Przykładowa definicja stylu ma postać:

<p style="font-variant:normal">Przykładowy tekst w wariancie - normal</p>

<p style="font-variant:small-caps">Przykładowy tekst w wariancie - small-caps</p>

<<przykład>>

<div class="przyklad" style="font-size:20pt;">

<p style="font-variant:normal">Przykładowy tekst w wariancie - normal</p>

<p style="font-variant:small-caps">Przykładowy tekst w wariancie - small-caps</p>

</div>

<</przykład>>

Warto się zastanowić, co się stanie, jeżeli wybrana czcionka nie będzie posiadała kapitalików. W takiej sytuacji przeglądarka spróbuje sama utworzyć tekst o odpowiednim wyglądzie lub zamieni całość na duże litery o identycznej wielkości. Efekt będzie dokładnie taki, jak po zastosowaniu stylu text-transform:uppercase, który opisałem w rozdziale czwartym.

Zbiorczy zapis właściwości czcionek

font-size-adjust

Dostępne wartości:

font-styl | font-variant | font-weight | font-size | line-hight | font-family

Wartość domyślna:

Patrz: właściwości poszczególnych stylów

Przykład:

p {font:italic small-caps 600 14pt/2 arial;}

Dziedziczenie:

Tak

Obsługa:

Patrz: właściwości poszczególnych stylów

Do tej pory przedstawiłem zapis właściwości czcionek oddzielnie dla każdego ze stylów. Jednak specyfikacja daje nam możliwość stosowania zapisu zbiorczego. Schematyczny zapis wygląda mniej więcej tak:

P

{

font: <font-styl> <font-variant> <font-weight> <font-size> <line-hight> <font-family>

}

Natomiast poniżej widać praktyczny przykład.

P

{

font:italic small-caps 600 14pt/2 arial;

}

<<przykład>>

<div class="przyklad">

<p style="font:italic small-caps 600 14pt/2 arial;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus convallis malesuada. Sed eu mattis dolor. Donec in lacinia diam. Nulla felis risus, ultricies nec placerat vel, venenatis in purus. Sed sem nisl, scelerisque non accumsan a, dapibus ac lacus. Vivamus eu imperdiet ligula. Duis porttitor lacus et dui feugiat rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam posuere lacus et augue suscipit dignissim. Pellentesque sollicitudin dolor at massa sollicitudin non vulputate odio congue. Aenean eu justo sit amet augue accumsan aliquam. Nam scelerisque sodales odio. Vivamus ut mattis sapien. Sed rhoncus nisi nec arcu facilisis rhoncus. </p>

</div>

<</przykład>>

Analizując przykładowy zbiorczy styl, od razu widzimy, że poszczególnych wartości nie rozdzielają żadne dodatkowe znaki — przecinki, myślniki itp. Jedynym wyjątkiem są wielkość czcionki oraz odstęp linii, pomiędzy którymi występuje znak /.

Podana kolejność poszczególnych właściwości jest bardzo ważna dla poprawnego rozumienia zapisanego w ten sposób stylu. Jeżeli zamieni się podane wartości, całość może nie zadziałać poprawnie, dlatego należy uważnie zapoznać się z tą konstrukcją, aby w przyszłości uniknąć problemów.

Zastanawiające jest, co robi wysokość linii we właściwościach czcionki. Otóż taka konstrukcja została dopuszczona przez specyfikację kaskadowych arkuszy stylów, a do tego działa poprawnie i jest bardzo przydatna w czasie pracy.

Oczywiście nic nie stoi na przeszkodzie, by w zbiorczej postaci zadeklarować tylko kilka elementów, a nie — jak to miało miejsce w przykładzie — wszystkie. Należy jednak pamiętać o tym, że nie wszystkie elementy można pominąć. Zasada pomijania niektórych wartości jest prosta i oczywista. Można pomijać tylko te właściwości czcionki, dla których istnieje wartość normal, czyli są to font-style, font-variant oraz font-weight. Innymi słowy, skrócona postać musi zawierać wartość dla font-size oraz font-family.

P

{

font:20pt arial;

}

Stosowanie zapisu skróconego ma sens wtedy, gdy w arkuszu stylów używamy wszystkich deklaracji stylu dla jednego selektora. Jednak wymaga to pamiętania o kolejności występowania poszczególnych elementów, co stanowi pewien problem.

 

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15342725