• 
  Wielkość czcionki {font-size}

  Jak zmienić rozmiar (wielkość) czcionki? Jaki jest najlepszy sposób ustalania wielkości czcionki?

• 
  Rodzaj czcionki {font-family}

  Jak zmienić rodzaj (krój) czcionki? W jaki sposób maksymalnie zabezpieczyć się przed wyświetleniem tekstu niechcianym krojem czcionki?

• 
  Czcionki osadzone @font-face

  W jaki sposób wczytać czcionkę z pliku?

• 
  Styl czcionki {font-style}

  W jaki sposób wprowadzić czcionkę pochyloną (kursywa)? Czym różni się styl "italic" od "oblique"?

• 
  Waga czcionki {font-weight}

  Jak wprowadzić czcionkę pogrubioną? Czy można wytłuścić tekst z różną intensywnością?

• 
  Wariant wielkości liter czcionki {font-variant-caps}

  W jaki sposób przekształcić zwykły tekst w kapitaliki, czyli napisany wielkimi literami, lecz czcionką o wysokości małych liter?

• 
  Wariant połączenia znaków czcionki {font-variant-ligatures}

  W jaki sposób sprawić, aby niektóre litery w tekście były ze sobą bardziej zlane tworząc estetyczne połączenie graficzne (ligatury)?

• 
  Wariant liczb czcionki {font-variant-numeric}

  Co zrobić, aby liczby w kolumnach tabeli z danymi były ułożone równo pod sobą? W jaki sposób wyświetlić licznik i mianownik rozdzielone kreską ułamkową?

• 
  Wariant pozycji czcionki {font-variant-position}

  W jaki sposób dodać indeks dolny lub górny tak, aby sąsiednie linijki tekstu nie były między sobą nieestetycznie rozsunięte?

• 
  Atrybuty mieszane wariantu czcionki {font-variant}

  W jaki sposób określić w jednym poleceniu wiele własności wariantu czcionki: połączenie liter (ligatury), wielkość liter (kapitaliki), formatowanie liczb oraz wyglądu indeksów dolnych i górnych w tekście?

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

• 
  Rozciągnięcie czcionki {font-stretch}

  W jaki sposób rozciągnąć lub ścieśnić czcionkę?

• 
  Proporcje czcionki {font-size-adjust}

  Co zrobić, aby czcionka na ekranie zawsze była tak samo czytelna, bez względu na jej krój (rodzaj)?

• 
  Odległość między znakami czcionki {font-kerning}

  W jaki sposób regulować odległość pomiędzy sąsiednimi znakami tekstu (kerning) tak, aby wyglądał bardziej estetycznie i był czytelniejszy?

• 
  Pytania i odpowiedzi

  CSS

• 
  Powtórka

  CSS

Wielkość czcionki {font-size}

selektor { font-size: rozmiar }

1. Imienne wartości absolutne:
   • xx-small - najmniejsza
   • x-small - bardzo mała
   • small - mała
   • medium - średnia
   • large - duża
   • x-large - bardzo duża
   • xx-large - największa

   Ostateczny rzeczywisty rozmiar tekstu, określony przy powmocy powyższych wartości, może się różnić w zależności od przeglądarki. Z tego powodu bezpieczniej jest podawać wszystkie wielkości czcionek w pikselach (np.: 14px).

   Przykład

   rozmiar xx-small

   rozmiar x-small

   rozmiar small

   rozmiar medium

   rozmiar large

   rozmiar x-large

   rozmiar xx-large

2. Wartości względne:
   • smaller - mniejsza od bieżącej
   • larger - większa od bieżącej

   Czcionka bieżąca to taka, której wielkość została określona w arkuszu stylów (importowanym, zewnętrznym lub wewnętrznym) albo poprzez styl lokalny [zobacz: Wstawianie stylów]. Jeśli czcionka bieżąca nie została określona, najczęściej przyjmuje domyślną wielkość 16px.

   Przykład

   rozmiar smaller

   czcionka bieżąca

   rozmiar larger

3. Jednostki długości

   Jednostka "em" jest w tym przypadku miarą względną i odnosi się do rozmiaru czcionki zdefiniowanej dla elementu rodzica, czyli: 1em = 100%.

   Przykład

   rozmiar 0.5cm

   rozmiar 4mm

   rozmiar 0.25in

   rozmiar 10pt

   rozmiar 1pc

   rozmiar 15px

   rozmiar 1em

   rozmiar 2ex

4. Procent wielkości bieżącej:

   Przykład

   rozmiar 75%

   Czcionka bieżąca

   rozmiar 150%

Jeśli definiowane własności mają odnosić się do całej strony (np. wielkość czcionki na całej stronie), można użyć selektora BODY albo HTML.

Najlepszy sposób ustalania wielkości czcionki

Jak widać, rozmiar tekstu można definiować przy pomocy wielu jednostek, jednak wcale nie jest wszystko jedno, w jaki sposób to zrobimy.

Jednostka "em"

Kiedyś panowała opinia, że najlepszą jednostką do ustalania rozmiaru czcionki jest "em" i rzeczywiście tak mogłoby się wydawać, ponieważ jednostka ta jest bezpośrednio związana z czcionką - oznacza po prostu rozmiar dużej litery. Być może takie przeświadczenie wzięło się również stąd, że w zamierzchłych w czasach, gdy na rynku królowała przeglądarka MSIE 6.0, taki sposób zapewniał użytkownikom możliwość samodzielnego dopasowania rozmiaru tekstu na stronie. Dzisiaj wszystkie popularne przeglądarki nie mają już z tym żadnych problemów.

Innym powodem stosowania tej jednostki mogła być chęć polepszenia czytelności witryny w urządzeniach mobilnych, które posiadają zwykle niewielki ekran. W takim przypadku jednak i tak pozostała cześć stylizacji dokumentu najczęściej nie nadaje się do wyświetlenia na ekranie np. telefonu komórkowego. Znacznie lepszym pomysłem jest przygotowanie osobnego arkusza CSS, przeznaczonego specjalnie dla medium handheld.

Używanie "em" posiada natomiast bardzo poważną wadę. Pamiętajmy, że "1em" to tyle samo co "100%", a więc jest obliczane zawsze względem jakiejś wartości bazowej, wyrażonej w pikselach. Gdy samodzielnie jej nie wpiszemy w naszym arkuszu stylów - a nie możemy, ponieważ wtedy utracilibyśmy wszystkie wyżej wymienione zalety - przeglądarka przyjmie swój domyślny rozmiar czcionki. W większości przypadków domyślną wartością jest "16px", ale nie ma na to żadnej gwarancji. Niesie to ze sobą poważne trudności:

• Nie da sie zapanować nad ułożeniem na stronie elementów graficznych, które z zasady posiadają rozmiary pikselowe.
• Czytelność tekstu zależy nie tylko od jego rozmiaru, ale również m.in. od proporcji, a więc rodzaju czcionki. Dlatego tak samo jak kolor tekstu zawsze powinno ustalać się wspólnie z kolorem tła, definiując rodzaj czcionki trzeba podać również jej rozmiar. Może się zdarzyć, że domyślnie ustawiona w przeglądarce czcionka ma bardzo duże proporcje, a więc będzie zupełnie czytelna przy rozmiarze "13px", podczas gdy najczęściej domyślnie stosowana w systemie Windows 'Times New Roman' jest czytelna dopiero przy ok. "16px". Jeśli teraz ustalimy na stronie czcionkę bezszeryfową, może okazać się, że "16px" to dla niej za dużo, ponieważ zwykle ma większe proporcje. Dlatego podajemy np. "font-size: 0.75em", co daje: 0.75 * 16px = 12px, podczas gdy dla domyślnego rozmiaru "13px" będzie to: 0.75 * 13px = 9.75px, co najczęściej oznacza miniaturowy tekst, bardzo trudny do odczytania.
• Na ekranie monitora wszystkie elementy są wyświetlane zawsze przy użyciu pikseli, a więc każda jednostka ostatecznie i tak musi być w ten sposób przeliczona. Jak można było zauważyć na wcześniejszym przykładzie obliczeń, korzystając z jednostek takich jak "em" (lub "%"), może się okazać, że przeliczona wartość pikselowa nie jest liczbą całkowitą. Jak wiadomo, nie da się podzielić piksela ekranowego, a więc wartość ta musi być zaokrąglona. Nie ma jednak żadnej pewności, w jaki sposób zostanie to wykonane: w dół, w górę, czy zgodnie z zasadami matematyki, a czasem nawet jeden piksel różnicy może być granicą dobrej czytelności tekstu.

Nie używaj jednostek "em" ani "%" do ustalania wielkości czcionek.

Jednostka "px"

Piksele są nierozerwalnie związane z ekranem monitora. Dlatego jednostka ta jest idealnym wyborem przy ustalaniu wielkości czcionki w podstawowym arkuszu CSS. Problemy ze skalowaniem tekstu, którego rozmiar został podany w pikselach, dzisiaj należą już do rzadkości - aktualne wersje wszystkich popularnych przeglądarek bez problemu sobie z tym radzą. Nie ma sensu na siłę szukać innego sposobu wymiarowania czcionek, ponieważ i tak nie uciekniemy od tego, że wszystkie ilustracje osadzone na stronie mają rozmiary pikselowe. Teoretycznie można narzucić im wymiary przy użyciu jednostek "em", ale może to wywołać konieczność ich przeskalowania przez przeglądarkę, co zawsze skutkuje utratą jakości zdjęcia - nawet przy pomniejszaniu.

Wartości pikselowe zupełnie nie nadają się do ustalania czcionki w arkuszu dla wydruku.

Jednostka "pt"

Jednostka "pt" (punkty) miała być dobrym kompromisem między trudnymi do przewidzenia konsekwencjami używania "em" a sztywnym blokowaniem rozmiaru za pomocą "px". Jeśli z komputera korzysta osoba słabowidząca lub po prostu posiadająca monitor z niewielkim ekranem, może zwiększyć podstawowy rozmiar czcionki w całym systemie operacyjnym, zmieniając tzw. wartość dpi, czyli liczbę pikseli przypadająca na jeden cal długości. Okazuje się jednak, że wiele osób w ogóle nie jest świadoma takiej możliwości. Przy tym przeglądarki często mają problem z prawidłowym wyznaczeniem ustawionej wartości dpi. Ponadto, jak to zwykle bywa z wartościami domyślnymi, nie da się w żaden sposób przewidzieć, co zostało ustawione w systemie użytkownika czytającego naszą stronę, a tutaj standardowe ustawienia różnych systemów operacyjnych mocno się różnią - wiele osób nawet nie wie jak to przestawić.

Nie używaj jednostki "pt" do ustalania rozmiaru czcionki na ekranie.

Większość edytorów tekstu podaje jednak rozmiary w punktach, a nie w pikselach. Drukarka zawsze zna dokładne wymiary arkusza papieru, a więc może zapewnić prawidłowy wydruk tekstu. "pt" jest zatem idealną jednostką w arkuszach CSS stylizujących formatowanie tekstu na wydruku.

Podsumowanie

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
font-size: wartość	1 2008-12-11	1 2004-11-09	12 2015-07-29	7 2003-01-28	1 2003-06-23

Rodzaj czcionki {font-family}

selektor { font-family: rodzaj, rodzaj1, rodzaj2,... }

Polecenie pozwala wybrać konkretny krój czcionki.

UWAGA! Należy być ostrożnym z używaniem tego polecenia, ponieważ jeśli użytkownik oglądający Twoją stronę, nie będzie posiadał podanej czcionki w swoim systemie operacyjnym, tekst zostanie napisany czcionką domyślną (może to być 'Times New Roman', chociaż to też nie jest pewne).
Poza tym nie każda czcionka potrafi zapisać poprawnie polskie znaki (w standardzie UTF). Koniecznie sprawdź rezultat w praktyce!

Korzystniej jest wypisać kilka rodzajów - wtedy zostanie użyta taka czcionka, którą pierwszą w kolejności podawania będzie posiadał użytkownik.

W systemie Windows standardowo dostępne powinny być czcionki: 'Times New Roman' (szeryfowa), Arial (bezszeryfowa), 'Courier New' (monotypiczna). Dodatkowo od jakiegoś czasu z Internet Explorerem dostarczane były: Verdana, Tahoma, 'Trebuchet MS', Georgia - dlatego nawet dzisiaj wciąż są powszechnie dostępne. Przy definiowaniu czcionki, dobrze jest wykorzystywać te właśnie rodzaje, a także takie które domyślnie występują w innych systemach operacyjnych (np. Helvetica - podobna do Arial).

Przykład {font-family}

To jest czcionka Arial

To jest czcionka 'Courier New'

To jest czcionka 'Times New Roman'

To jest czcionka Verdana

Rodziny ogólne {font-family: serif sans-serif monospace cursive fantasy}

Oprócz podania rodzaju czcionki wprost, możliwe jest także wpisanie rodziny ogólnej:

• serif - czcionka szeryfowa (końcówki znaków posiadają "ozdobniki"), np.: 'Times New Roman', Georgia, Garamond, Bodoni
• sans-serif - czcionka bezszeryfowa (końcówki znaków są proste), np.: Arial, Verdana, 'Trebuchet MS', Helvetica, Univers, Futura
• monospace - czcionka o stałej szerokości znaków - monotypiczna (wygląda, jak pisana na maszynie), np.: Courier, 'Courier New'
• cursive - czcionka mająca pewne cechy pochyłej (wygląda, jak pisana ręcznie)
• fantasy - czcionka fantazyjna (dekoracyjna)

body { font-family: Arial, Helvetica, Verdana, sans-serif }

Taki sposób jest mocno zalecany, gdyż wtedy nawet jeśli użytkownik nie będzie posiadał żadnej z podanych czcionek, strona zostanie wyświetlona przy użyciu czcionki podobnej do zdefiniowanych, a nie domyślnej, która może zupełnie nie pasować do typografii naszej strony. Dlatego zawsze staraj się na końcu wpisywać rodzinę ogólną, do której należą czcionki, podane w pierwszej kolejności (najczęściej wykorzystuje się rodziny: serif lub sans-serif).

Niestety, ponieważ w takim przypadku to przeglądarka automatycznie dobiera rodzaj czcionki, może się zdarzyć, że wybierze czcionkę, która niepoprawnie zapisuje polskie znaki (tak się właśnie stało w mojej przeglądarce z rodziną fantasy). Chociaż jeśli chodzi o rodziny podstawowe (serif, sans-serif, monospace), wszystko powinno być w porządku.

Przykład {font-family: serif sans-serif monospace cursive fantasy}

To jest rodzina ogólna serif

To jest rodzina ogólna sans-serif

To jest rodzina ogólna monospace

To jest rodzina ogólna cursive

To jest rodzina ogólna fantasy

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
font-family: wartość	1 2008-12-11	1 2004-11-09	12 2015-07-29	3.5 1998-11-18	1 2003-06-23

Czcionki osadzone @font-face

Najbardziej zaawansowaną możliwością ustalania kroju czcionki są tzw. czcionki osadzone. Jak czytelnik zapewne zauważył w rozdziale pt. Rodzaj czcionki, ustalenie kroju czcionki wcale nie jest takie proste. O czcionce przy użyciu której zostanie wyświetlona nasza strona WWW, decyduje zestaw "fontów" zainstalowanych przez użytkownika (w jego systemie operacyjnym). Praktycznie nie można przewidzieć rezultatu, gdyż na dobrą sprawę nie wiemy, jaki system posiada internauta odwiedzający nasz serwis. Używanie podstawowych rodzajów czcionek ('Times New Roman', Arial, 'Courier New', Helvetica) nie zawsze musi nam odpowiadać, a poza tym nie gwarantuje oczekiwanego rezultatu w stu procentach.

Okazuje się jednak, że istnieje sposób, pozwalający używać na stronie WWW dowolne czcionki, bez obawy o niepoprawne wyświetlanie. Możliwe jest umieszczenie na serwerze specjalnego pliku z czcionkami, z którego korzysta przeglądarka, podczas wyświetlania strony. Nawet jeśli użytkownik nie będzie posiadał wymaganego kroju, zostanie on automatycznie pobrany z Internetu i dynamicznie tymczasowo zainstalowany w jego systemie. Użytkownik nie będzie mógł z takiej czcionki korzystać po wyjściu z serwisu - chroni to prawa autorskie producentów czcionek.

Osadzanie czcionki bezpośrednio na stronie odbywa się w arkuszu stylów (wewnętrznym lub zewnętrznym) poprzez użycie specjalnej reguły stylów @font-face, w której wskazujemy lokalizację pliku czcionki. Natomiast przypisanie tak zdefiniowanej czcionki do wybranych elementów na stronie odbywa się już w standardowy sposób, który został opisany w rozdziale. pt. Rodzaj czcionki.

<html>
<head>
<style>
@font-face {
	font-family: comic;
	src: url(http://adres/plik.ttf);
}
body {
	font-family: comic;
}
</style>
</head>
<body>
Ten tekst jest napisany czcionką osadzoną "comic".
<p style="font-family: comic">Ten akapit używa czcionki osadzonej "comic".</p>
</body>
</html>

Warto pamiętać, że jeśli chcemy przypisać tak zdefiniowaną czcionkę do wielu elementów na stronie, wystarczy osadzić ją tylko raz (pierwsze polecenie w arkuszu stylów powyżej), a następnie można przypisywać ją dowolną liczbę razy (drugie polecenie).

Jako adres URL można podać także ścieżkę dostępu do pliku czcionki, wyznaczaną względem arkusza CSS, a nie dokumentu HTML, w którym ten arkusz został dołączony.

Opcjonalnie zaleca się podać również format pliku czcionki, aby przeglądarka nie pobierała fontu, którego nie potrafi wyświetlić ani żeby nie musiała się domyślać formatu na podstawie rozszerzenia nazwy pliku:

@font-face {
	font-family: comic;
	src: url(http://adres/plik.ttf) format("truetype");
}

Źródło: Cascading Style Sheets, Level 2

Może się zdarzyć, że użytkownik będzie posiadał zainstalowaną niestandardową czcionkę w swoim systemie operacyjnym. Nie ma sensu wtedy pobierać jej z serwera. Jednak na podstawie samej nazwy pliku czy nazwy, jaką przypisaliśmy czcionce osadzonej, nie da się stwierdzić, jak naprawdę nazywa się ta czcionka. Dlatego konieczne jest jawne wpisanie jej nazwy (zwracam uwagę, że jest to pełna nazwa czcionki, a nie nazwa pliku, dlatego obowiązkowo trzeba ją ująć w cudzysłowy lub apostrofy!):

@font-face {
	font-family: comic;
	src: local("Comic Font Regular"), url(http://adres/plik.ttf) format("truetype");
}

Przeglądarki takie jak: Firefox 3, Opera 10, Chrome 4 czy Safari bez problemu radzą sobie z wczytywaniem fontów wprost z plików *.ttf. Niestety nie wszystkie przeglądarki to potrafią. Microsoft wprowadził własny format czcionek osadzonych - Embedded OpenType (pliki *.eot). Za pomocą specjalnego programu - WEFT można skonwertować do tego formatu czcionki, które są odpowiednio wyprodukowane i nie posiadają zakazu ich publikacji. Istnieją również inne konwertery formatu TTF -> EOT. Aby zatem osadzić na stronie niestandardową czcionkę, która powinna być widoczna również w starszych przeglądarkach, można się posłużyć następującym kodem:

@font-face {
	font-family: comic;
	src: url(http://adres/plik.eot);
	src: local("Comic Font Regular"), url(http://adres/plik.ttf) format("truetype");
}

Większość fontów jest licencjonowana, tzn. zwykle nie można legalnie osadzić ich na swojej stronie internetowej, nawet jeśli były wcześniej zainstalowane na Twoim komputerze.

Istnieją jednak serwisy WWW, gdzie można za darmo pobrać całą masę czcionek - nawet do użytku komercyjnego. Takim serwisem jest np. Font Squirrel - udostępnia on nie tylko pokaźny zbiór bezpłatnych czcionek, ale nawet gotowe paczki z wersjami tych samych fontów w formacie *.eot. Pamiętaj jednak, że używanie czcionek osadzonych wymaga pobrania dodatkowego pliku przez przeglądarkę, co trochę wydłuży czas wczytywania strony. Poza tym nie wszyscy użytkownicy lubią czytać tekst napisany fantazyjnymi, niestandardowymi fontami. Dlatego stosuj tę metodę rozsądnie.

Google Fonts

Google Fonts to darmowa platforma udostępniająca katalog czcionek ze szczególnym przeznaczeniem do osadzania na stronach internetowych. Co ważne, wszystkie fonty można używać całkowicie bezpłatnie - nawet na stronach komercyjnych. Można je również pobrać na swój dysk i samodzielnie zmodyfikować (np. dodając brakujące znaki) albo użyć w innym projekcie, niekoniecznie związanym ze stronami WWW.

Aby skorzystać z dowolnej czcionki dostępnej w katalogu Google Fonts, nie trzeba nawet umieszczać na swoim serwerze żadnych plików. Mogą być one pobierane wprost z serwerów Google. Dzięki temu, jeżeli nasz czytelnik wcześniej odwiedzi inny serwis, w którym również była osadzona taka sama czcionka jak na naszej stronie, plik nie będzie musiał być pobierany ponownie, ponieważ będzie już zapisany w pamięci podręcznej przeglądarki użytkownika. Oczywiście osoby, które obawiają się, że Google kiedyś zaprzestanie udostępniania darmowych czcionek, mogą skopiować sobie pliki na własny serwer ;-)

<head>
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=rodzaj">
	<style>
	selektor { font-family: rodzaj }
	</style>
</head>

Jeżeli nazwa rodzaju czcionki zawiera spację, w adresie arkusza musi być ona zastąpiona znakiem plusa. Natomiast już wewnętrznym arkuszu CSS wstawiamy normalnie znak spacji. Oczywiście jako wartość atrybutu font-family powinny zostać podane po przecinku standardowo dostępne w systemach operacyjnych rodzaje czcionek, a na samym końcu nazwa rodziny ogólnej [zobacz rozdział: Rodzaj czcionki] - podobne wyglądem do czcionki osadzonej. Dzięki temu, jeżeli przeglądarka użytkownika nie będzie obsługiwała mechanizmu osadzania czcionek, tekst wyświetli się innym, najbardziej zbliżonym krojem pisma.

Google udostępnia specjalne narzędzie do podglądu czcionek. Dzięki niemu można szybko wybrać czcionkę, ustawić jej wymagane atrybuty i od razu skopiować kod HTML gotowy do osadzenia na swojej stronie.

Nie każda czcionka z katalogu zawiera wszystkie polskie znaki diakrytyczne. Co prawda w takim przypadku przeglądarki mogą wyświetlić brakujące litery standardową czcionką, ale i tak nie wygląda to estetycznie. Dlatego zawsze dobrze jest sprawdzić rezultat przed wprowadzenie strony do Internetu.

Wersja czcionki

Czcionki mogą być udostępniane w kilku wersjach:

regular

Domyślnie

bold

b

Wytłuszczenie (pismo pogrubione)

italic

i

Kursywa (pismo pochylone)

bolditalic

bi

Jednocześnie kursywa i wytłuszczenie

Aby osadzić czcionkę w wybranej wersji - innej niż domyślna - nazwę lub skrót nazwy wersji należy wpisać w adresie arkusza CSS, doklejając ją do nazwy czcionki po znaku dwukropka. Jeżeli w jednym dokumencie HTML korzystamy z kilku wersji tej samej czcionki, nazwy lub skróty nazw wersji wyliczamy po przecinku, np.:

<head>
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=rodzaj:bold,italic">
</head>

Zwracam uwagę, że "bold,italic" nie jest tym samym co "bolditalic". W pierwszym przypadku możemy używać czcionki pogrubionej albo pochylonej do różnych tekstów, ale jeśli jeden tekst ma być napisany jednocześnie pismem pogrubionym i pochylonym, musimy skorzystać z drugiego przypadku. Nie należy jednak dołączać wszystkich możliwych wersji czcionki na zapas, ponieważ wydłuży to wczytywanie strony.

Alfabet

Niektóre czcionki potrafią wyświetlić pismo składające się z liter różnych alfabetów:

latin

Alfabet łaciński (m.in. język polski)

cyrillic

Cyrylica (m.in. język rosyjski)

greek

Alfabet grecki

khmer

Język khmerski (Kambodża, Wietnam i Tajlandia)

<head>
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=rodzaj&amp;subset=alfabet">
</head>

Jeżeli na jednej stronie chcemy używać kilku alfabetów tej samej czcionki, nazwy alfabetów wymieniamy po znaku przecinka.

Lista czcionek

Jeżeli w jednym dokumencie HTML chcemy skorzystać z kilku różnych rodzajów czcionek osadzonych, możemy oczywiście dołączyć kilka arkuszy CSS. Nie jest to jednak najlepsze rozwiązanie, ponieważ wydłuża czas potrzebny na załadowanie strony za pierwszym razem. Zwykle korzystniej wstawić tylko jeden arkusz, a w adresie podać po znaku "pipe" ("|") nazwy wszystkich potrzebnych czcionek (z ewentualnymi nazwami wersji - nie ma natomiast możliwości określenia osobnego alfabetu dla każdej czcionki), np.:

<head>
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=rodzaj1:bold,italic|rodzaj2">
</head>

Nie należy dołączać wszystkich możliwych rodzajów czcionek na zapas, ponieważ wydłuży to wczytywanie strony. Jeżeli na jednej stronie używamy tylko pierwszego rodzaju czcionki, a na innej tylko drugiego, zwykle lepiej jest na każdej z nich dołączyć oddzielny arkusz. Być może użytkownik nigdy nie odwiedzi drugiej strony i wtedy plik drugiej czcionki nigdy nie będzie musiał być pobrany do pamięci podręcznej jego przeglądarki. Nawet jeśli czytelnik odwiedzi obie strony, pobieranie rozłoży się na raty, co również najczęściej będzie korzystniejsze.

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
@font-face	1 2008-12-11	3.5 2009-06-30	12 2015-07-29	10 2009-09-01	3.1 2008-03-18
@font-face { src: url(*.woff) }	6 2010-09-02	3.5 2009-06-30	12 2015-07-29	11.1 2011-04-12	5.1 2011-07-20
@font-face { font-family: wartość }	4 2010-01-25	3.5 2009-06-30	12 2015-07-29	10 2009-09-01	3.1 2008-03-18
@font-face { src: wartość }	4 2010-01-25	3.5 2009-06-30	12 2015-07-29	10 2009-09-01	3.1 2008-03-18

selektor { font-style: styl }

Polecenie pozwala nadać czcionce określony styl. Może to być: czcionka zwyczajna, pochylona lub pochylona drugiego rodzaju. Dwie ostatnie są wyświetlane bardzo podobnie. Różnica między nimi polega na tym, że czcionka italic faktycznie jest osobnym krojem, natomiast oblique może zostać wygenerowana przez pochylenie zwykłej czcionki.

Przykład {font-style}

styl normal

styl italic

styl oblique

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
font-style: wartość	1 2008-12-11	1 2004-11-09	12 2015-07-29	7 2003-01-28	1 2003-06-23
font-style: italic	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	1 2003-06-23
font-style: normal	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	1 2003-06-23

selektor { font-weight: waga }

1. Wartości absolutne:
   • normal - czcionka normalna (podstawowa)
   • bold - czcionka pogrubiona
   • 100, 200, 300, 400 (odpowiednik "normal"), 500, 600, 700 (odpowiednik "bold"), 800, 900 - każdy następny numer wskazuje wagę czcionki przynajmniej tak samo wytłuszczonej jak dla poprzedniej wartości w sekwencji

   Niektóre rodziny czcionek mogą nie posiadać wszystkich dziewięciu stopni wytłuszczenia. Wiele posiada tylko wartości "normal" i "bold".

   Przykład

   waga normal (400)

   waga bold (700)

   waga 100

   waga 200

   waga 300

   waga 400 (normal)

   waga 500

   waga 600

   waga 700 (bold)

   waga 800

   waga 900

2. Wartości względne:
   • lighter - czcionka mniej wytłuszczona od odziedziczonej lub przypisanej do znacznika (np. typowo znaczniki <b>...</b> oraz <strong>...</strong> mają przypisaną domyślną wagę "bold")
   • bolder - czcionka bardziej wytłuszczona

   Przykład

   waga lighter w stosunku do wartości "200"

   waga lighter dla znacznika <B>...</B>

   waga bolder w stosunku do wartości "800"

   waga bolder dla znacznika <B>...</B>

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
font-weight: wartość	2 2009-05-21	1 2004-11-09	12 2015-07-29	3.5 1998-11-18	1 2003-06-23
font-weight: bold	2 2009-05-21	1 2004-11-09	12 2015-07-29	15 2013-07-02	1 2003-06-23
font-weight: bolder	2 2009-05-21	1 2004-11-09	12 2015-07-29	15 2013-07-02	1 2003-06-23
font-weight: lighter	2 2009-05-21	1 2004-11-09	12 2015-07-29	15 2013-07-02	1 2003-06-23
font-weight: normal	2 2009-05-21	1 2004-11-09	12 2015-07-29	15 2013-07-02	1 2003-06-23

CSS 3

selektor { font-variant-caps: wariant }

Polecenie pozwala zmieniać typografię (układ) tekstu poprzez przekształcenie wielkości liter tak, aby prezentowały się w sposób bardziej ciekawy. Czasami w ten sposób prezentuje się nagłówki, tytuły i inne fragmenty tekstu, które wymagają specjalnego wyróżnienia, a zwyczajne pochylenie czy pogrubienie z jakichś względów nie jest odpowiednie.

Jeśli zależy Ci na obsłudze również starszych przeglądarek, zamiast tego polecenia użyj: "font-variant: small-caps". Niestety tylko ten jeden wariant (zwykłe kapitaliki) ma szerokie wsparcie i tylko przy użyciu własności font-wariant, a nie font-variant-caps.

Przykład {font-variant-caps}

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
font-variant-caps: wartość	52 2016-07-20	34 2014-12-01	79 2020-01-15	39 2016-08-02	9.1 2016-03-21
font-variant-caps: all-petite-caps	52 2016-07-20	34 2014-12-01	79 2020-01-15	39 2016-08-02	9.1 2016-03-21
font-variant-caps: all-small-caps	52 2016-07-20	34 2014-12-01	79 2020-01-15	39 2016-08-02	9.1 2016-03-21
font-variant-caps: normal	52 2016-07-20	34 2014-12-01	79 2020-01-15	39 2016-08-02	9.1 2016-03-21
font-variant-caps: petite-caps	52 2016-07-20	34 2014-12-01	79 2020-01-15	39 2016-08-02	9.1 2016-03-21
font-variant-caps: small-caps	52 2016-07-20	34 2014-12-01	79 2020-01-15	39 2016-08-02	9.1 2016-03-21
font-variant-caps: titling-caps	52 2016-07-20	34 2014-12-01	79 2020-01-15	39 2016-08-02	9.1 2016-03-21
font-variant-caps: unicase	52 2016-07-20	34 2014-12-01	79 2020-01-15	39 2016-08-02	9.1 2016-03-21

CSS 3

selektor { font-variant-ligatures: warianty }

1. normal - domyślne ustawienia
2. none - zablokowanie ligatur, dzięki czemu możemy np. nieco przyspieszyć wyświetlanie tekstu na ekranie
3. Dowolna liczba poniższych wartości rozdzielonych spacjami:
   • common-ligatures albo no-common-ligatures - włącza lub wyłącza standardowe ligatury
   • discretionary-ligatures albo no-discretionary-ligatures - włącza lub wyłącza ligatury specyficzne dla określonej czcionki
   • historical-ligatures albo no-historical-ligatures - włącza lub wyłącza historyczne ligatury, które występowały np. w zabytkowych, ręcznie kaligrafowanych książkach
   • contextual albo no-contextual - włącza lub wyłącza kontekstowe ligatury, dzięki którym kształt znaków może się nieco zmienić w zależności z jakimi literami sąsiadują

   Możliwe jest łączenie powyższych wariantów - np.: "font-variant-ligatures: no-common-ligatures discretionary-ligatures contextual".

Ligatura to połączenie dwóch lub więcej sąsiadujących liter w jeden znak graficzny. Przykładowo jeśli w tekście będą występować obok siebie podwójne litery "ff" albo kombinacja liter "fi", mogą zostać zlane w pojedynczy symbol w taki sposób, że nie pojawi się między nimi żaden odstęp.

Niestety nie każda czcionka udostępnia ligatury. Często dostępny może być jedynie wariant discretionary-ligatures, a dla czcionek bezszeryfowych - nawet żaden.

Przykład {font-variant-ligatures}

Na poniższej liście powinno być widać różnicę wyświetlania przynajmniej dla discretionary-ligatures - zwróć uwagę, na połączone (bardziej ze sobą zlane) litery "ffi":

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
font-variant-ligatures: wartość	34 2014-04-08	34 2014-12-01	79 2020-01-15	21 2014-05-06	9.1 2016-03-21
font-variant-ligatures: common-ligatures	31 2013-11-12	34 2014-12-01	79 2020-01-15	18 2013-11-19	7 2013-10-22
font-variant-ligatures: contextual	31 2013-11-12	34 2014-12-01	79 2020-01-15	18 2013-11-19	7 2013-10-22
font-variant-ligatures: discretionary-ligatures	31 2013-11-12	34 2014-12-01	79 2020-01-15	18 2013-11-19	7 2013-10-22
font-variant-ligatures: historical-ligatures	31 2013-11-12	34 2014-12-01	79 2020-01-15	18 2013-11-19	7 2013-10-22
font-variant-ligatures: no-common-ligatures	31 2013-11-12	34 2014-12-01	79 2020-01-15	18 2013-11-19	7 2013-10-22
font-variant-ligatures: no-contextual	31 2013-11-12	34 2014-12-01	79 2020-01-15	18 2013-11-19	7 2013-10-22
font-variant-ligatures: no-discretionary-ligatures	31 2013-11-12	34 2014-12-01	79 2020-01-15	18 2013-11-19	7 2013-10-22
font-variant-ligatures: no-historical-ligatures	31 2013-11-12	34 2014-12-01	79 2020-01-15	18 2013-11-19	7 2013-10-22
font-variant-ligatures: none	31 2013-11-12	34 2014-12-01	79 2020-01-15	18 2013-11-19	7 2013-10-22
font-variant-ligatures: normal	31 2013-11-12	34 2014-12-01	79 2020-01-15	18 2013-11-19	7 2013-10-22

CSS 3

selektor { font-variant-numeric: warianty }

1. normal - domyślne ustawienia
2. Dowolna liczba poniższych wartości rozdzielonych spacjami:
   • ordinal - liczba porządkowa, np. w języku angielskim wyraz first (co oznacza: pierwszy) możemy zapisać skrótowo jako: 1^st
   • slashed-zero - cyfra zero może zostać przekreślona ukośną kreską, aby nie pomylić jej z wielką literą "O"
   • lining-nums albo oldstyle-nums - cyfry leżące na jednej linii albo nieco poprzesuwane w górę i w dół (przypominające ręcznie wypełniane zestawienia np. w starych księgach przychodów i rozchodów)
   • proportional-nums albo tabular-nums - każda cyfra może mieć różną szerokość albo wszystkie cyfry będą tej samej szerokości (dzięki czemu jeśli umieścimy je np. w tabeli z jakimiś danymi, liczby w tej samej kolumnie będą ze sobą wyrównane)
   • diagonal-fractions albo stacked-fractions - ułamki z ukośną albo poziomą kreską ułamkową

   Możliwe jest łączenie powyższych wariantów - np.: "font-variant-numeric: slashed-zero tabular-nums diagonal-fractions".

W tekście oprócz wyrazów składających się z liter często występują również dane liczbowe. Przyjęło się wyświetlać takie dane w określonym formacie.

Na przykład proste ułamki zwykłe występujące w tekście często zapisujemy z ukośną kreską ułamkową oraz nieco pomniejszonym licznikiem i mianownikiem: ½. Taki znak jednak nie występuje na klawiaturze, dlatego łatwiej jest wpisać po prostu: 1/2, a następnie przekształcić tekst w taki sposób, aby wyglądał jak ułamek. Pozwala na to wariant czcionki: diagonal-fractions.

Innym typowym zastosowaniem liczb w tekście są różnorodne zestawienia tabelaryczne. W celach estetycznych, ale również dla wygody czytania zwykle zależy nam, aby liczby występujące w tej samej kolumnie tabeli były ze sobą wyrównane. Można to uzyskać za pomocą czcionki monotypicznej, ale jej wygląd nie zawsze musi pasować do reszty tekstu. Dlatego czasami lepsze efekty daje przekształcenie znaków cyfr w bieżącej czcionce w taki sposób, aby wszystkie zajmowały taką samą szerokość. Pozwala na to wariant czcionki: tabular-nums.

Niestety nie każda czcionka udostępnia wszystkie warianty formatowania liczb. Niedostępne mogą być zwłaszcza warianty: ordinal, slashed-zero i stacked-fractions. Ponadto jeżeli czcionka nie będzie zawierać wariantu tabular-nums, przeglądarka może zasymulować podobny efekt dopasowując odstępy między sąsiednimi liczbami. W niektórych przypadkach wymaga to jednak aby były one rozdzielone fizycznym znakiem spacji.

Przykład {font-variant-numeric}

Poniżej widać efekt uzyskany przy użyciu "font-variant-numeric: proportional-nums":

1 1 1 1 1 11111
9 9 9 9 9 99999

A tak wygląda ten sam tekst przy użyciu "font-variant-numeric: tabular-nums":

1 1 1 1 1 11111
9 9 9 9 9 99999

Zwróć uwagę, że o ile dla wariantu tabular-nums w pięciu pierwszych kolumnach prawdopodobnie zobaczysz wyrównane ze sobą cyfry 1 i 9, to dla kolejnych liczb może już tak nie być. Dzieje się tak, ponieważ pomiędzy cyframi w liczbach 11111 i 99999 nie umieszczono znaków spacji, więc przeglądarka nie może odpowiednio dopasować przerw między nimi. Jeżeli widzisz cyfry wyrównane we wszystkich kolumnach, znaczy to, że Twoja przeglądarka radzi sobie z tym lepiej.

I na koniec dla porównania ten sam tekst, ale w ogóle bez użycia font-variant-numeric:

1 1 1 1 1 11111
9 9 9 9 9 99999

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
font-variant-numeric: wartość	52 2016-07-20	34 2014-12-01	79 2020-01-15	39 2016-08-02	9.1 2016-03-21
font-variant-numeric: diagonal-fractions	52 2016-07-20	34 2014-12-01	79 2020-01-15	39 2016-08-02	9.1 2016-03-21
font-variant-numeric: lining-nums	52 2016-07-20	34 2014-12-01	79 2020-01-15	39 2016-08-02	9.1 2016-03-21
font-variant-numeric: normal	52 2016-07-20	34 2014-12-01	79 2020-01-15	39 2016-08-02	9.1 2016-03-21
font-variant-numeric: oldstyle-nums	52 2016-07-20	34 2014-12-01	79 2020-01-15	39 2016-08-02	9.1 2016-03-21
font-variant-numeric: ordinal	52 2016-07-20	34 2014-12-01	79 2020-01-15	39 2016-08-02	9.1 2016-03-21
font-variant-numeric: proportional-nums	52 2016-07-20	34 2014-12-01	79 2020-01-15	39 2016-08-02	9.1 2016-03-21
font-variant-numeric: slashed-zero	52 2016-07-20	34 2014-12-01	79 2020-01-15	39 2016-08-02	9.1 2016-03-21
font-variant-numeric: stacked-fractions	52 2016-07-20	34 2014-12-01	79 2020-01-15	39 2016-08-02	9.1 2016-03-21
font-variant-numeric: tabular-nums	52 2016-07-20	34 2014-12-01	79 2020-01-15	39 2016-08-02	9.1 2016-03-21

CSS 3

selektor { font-variant-position: wariant }

W języku HTML istnieją znaczniki <sub>...</sub> i <sup>...</sup> służące do tworzenia indeksów dolnych  i górnych w tekście. Co więcej w języku CSS mamy dodatkowo możliwość ustalania pozycji tekstu w pionie formatując nawet zwykły tekst w taki sposób, aby wyglądał jak indeks dolny lub górny: "vertical-align: sub" i "vertical-align: super". Jest jednak pewna wada obu tych metod. Aby indeks dolny czy górny zmieścił się w tekście i nie zachodził na sąsiadujące wiersze, wysokość linii musi zostać nieco powiększona. Powoduje to nieestetyczny efekt, kiedy sąsiednie linijki tekstu są od siebie bardziej odsunięte, ponieważ w jednej z nich pojawił się nawet tylko jeden indeks dolny lub górny.

Wadę tę eliminuje użycie właściwości font-variant-position, dzięki której mimo wprowadzenia indeksu w tekście, wysokość linii się nie zmienia. W większości przypadków zaleca się jednak stosowanie tej właściwości tylko do znaczników <sub>...</sub> i <sup>...</sup>, ponieważ niosą one ze sobą dodatkowe znaczenie semantyczne.

Mimo iż zgodnie ze specyfikacją CSS przeglądarki powinny zasymulować wygląd indeksu w tekście, nawet jeśli użyta czcionka nie udostępnia takiego wariantu, niestety nie jest to normą. Z tego powodu zaleca się stosować zapytania właściwości.

Dzięki użyciu zapytań właściwości poniższy arkusz stylów zostanie zastosowany tylko w przeglądarkach obsługujących wariant pozycji czcionki. W pozostałych przypadkach po wstawieniu w tekście indeksu dolnego lub górnego wysokość linii co prawda się powiększy, ale przynajmniej wygląd indeksów nie będzie popsuty:

@supports (font-variant-position: sub) {
	sub {
		vertical-align: baseline;
		font-size: 100%;
		line-height: inherit;
		font-variant-position: sub;
	}
}
@supports (font-variant-position: super) {
	sup {
		vertical-align: baseline;
		font-size: 100%;
		line-height: inherit;
		font-variant-position: super;
	}
}

Przykład {font-variant-position}

Dzięki zastosowaniu font-variant-position wysokość linii się nie zmienia - zobacz ramkę wokół poniższego tekstu (jeśli nie widzisz indeksu dolnego i górnego przy cyfrach 2, znaczy to, że Twoja przeglądarka nie obsługuje wariantu pozycji czcionki):

H2O mc2

Dla porównania tak wygląda tekst po użyciu standardowych znaczników <sub>...</sub> i <sup>...</sup> - zwróć uwagę, że tym razem wysokość linii jest większa:

H₂O mc²

Przeglądarki

❌ Nie działa

	Chrome	Firefox	Edge	Opera	Safari
font-variant-position: wartość	❌	34 2014-12-01	❌	❌	9.1 2016-03-21
font-variant-position: normal	❌	≤72 2020-01-07	❌	❌	≤13.1 2020-03-24
font-variant-position: sub	❌	≤72 2020-01-07	❌	❌	≤13.1 2020-03-24
font-variant-position: super	❌	≤72 2020-01-07	❌	❌	≤13.1 2020-03-24

selektor { font-variant: wartości atrybutów }

1. normal - wartość domyślna
2. none - zablokowanie wszystkich rodzajów wariantów
3. Dowolna liczba poniższych wartości rozdzielonych spacjami:
   • font-variant-ligatures
   • font-variant-caps
   • font-variant-numeric
   • font-variant-position

Polecenie to pozwala w wygodny sposób zdefiniować wszystkie atrybuty dotyczące wariantów czcionki. Już nie musimy wypisywać kolejno wszystkich cech, a jedynie ich konkretne wartości. Na przykład zamiast wpisywać kolejno:

p {
	font-variant-ligatures: discretionary-ligatures;
	font-variant-caps: small-caps;
	font-variant-numeric: oldstyle-nums tabular-nums;
}

wystarczy wpisać:

p {
	font-variant: discretionary-ligatures small-caps oldstyle-nums tabular-nums;
}

Jeśli zależy Ci na obsłudze również starszych przeglądarek, użyj: "font-variant: small-caps". Niestety tylko ten jeden wariant (zwykłe kapitaliki) ma szerokie wsparcie.

Przykład {font-variant}

<p style="font-variant: small-caps oldstyle-nums">
	To jest paragraf napisany małymi kapitałkami z cyframi nieco poprzesuwanymi w górę i w dół (zobacz: 0123456789).
</p>

To jest paragraf napisany małymi kapitałkami z cyframi nieco poprzesuwanymi w górę i w dół (zobacz: 0123456789).

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
font-variant: wartość	1 2008-12-11	1 2004-11-09	12 2015-07-29	3.5 1998-11-18	1 2003-06-23
font-variant: none	52 2016-07-20	34 2014-12-01	79 2020-01-15	39 2016-08-02	9 2015-09-30
font-variant: normal	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	1 2003-06-23

Atrybuty mieszane czcionki {font}

selektor { font: wartości atrybutów }

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):
   • 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
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}

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

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

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

selektor { font-stretch: rozciąg }

Polecenie pozwala ustalić poziome rozciągnięcie czcionki na ekranie. Tekst rozciągnięty będzie zajmował więcej miejsca w linii, natomiast ściśnięty - mniej.

UWAGA! Polecenie wchodzi w skład CSS 2.0, ale nie CSS 2.1

Przykład {font-stretch}

rozciągnięcie ultra-condensed

rozciągnięcie extra-condensed

rozciągnięcie condensed

rozciągnięcie semi-condensed

rozciągnięcie normal

rozciągnięcie semi-expanded

rozciągnięcie expanded

rozciągnięcie extra-expanded

rozciągnięcie ultra-expanded

Niestety przeglądarki nie interpretują tego polecenia, więc prawdopodobnie nie zauważysz żadnego efektu.

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
font-stretch: wartość	60 2017-07-25	9 2011-12-20	12 2015-07-29	47 2017-08-09	11 2017-09-19

selektor { font-size-adjust: proporcje }

Subiektywny odbiór wielkości czcionki - a przez to jej czytelność - zależy bardziej od wysokości małej litery (1ex) niż od wysokości całej czcionki (1em). Dzieje się tak dlatego, ponieważ pomimo określenia takiego samego rozmiaru, różne czcionki posiadają różne proporcje, czyli stosunek wysokości małej litery do wysokości całej czcionki (1ex/1em). Oto proporcje wybranych czcionek:

• Times New Roman - 0.46
• Verdana - 0.58
• Comic Sans MS - 0.54
• Trebuchet MS - 0.53
• Georgia - 0.5
• Myriad Web - 0.48
• Minion Web - 0.47
• Gill Sans - 0.46
• Bernhard Modern - 0.4
• Caflish Script Web - 0.37
• Flemish Script - 0.28

Czcionki o większych proporcjach, są bardziej czytelne już przy mniejszej wysokości całkowitej.

Przykładowo wyrażenia: 'Times New Roman' oraz Verdana, zostały napisane różnymi czcionkami, ale o tej samej wielkości. Mimo to, pierwsze z nich (napisane czcionką 'Times New Roman') wydaje się wyraźnie mniejsze (jeżeli posiadasz oba rodzaje czcionek).

Przy deklarowaniu rodzaju czcionki zawsze istnieje niebezpieczeństwo, że użytkownik nie będzie posiadał zdefiniowanych przez Ciebie czcionek. Wtedy cały tekst na ekranie zostanie napisany czcionką domyślną. Może się jednak zdarzyć tak, że przy podanym rozmiarze, czcionka domyślna będzie dużo mniej czytelna lub zbyt "wysoka" i przez to strona straci estetykę. Powodem są właśnie znacznie różniące się proporcje. Aby zabezpieczyć się na taki wypadek, należy określić proporcje czcionki, za pomocą powyższego polecenia. Dzięki temu, niezależnie od rodzaju czcionki, tekst będzie tak samo czytelny, ponieważ przeglądarka automatycznie dobierze odpowiednią jej wielkość - zgodnie ze wzorem:

w' = w * (p / p')

• w - wysokość czcionki określona w poleceniu
• p - proporcje określone w poleceniu
• w' - obliczona wysokość
• p' - proporcje dostępnej czcionki

<p style="font-family: Verdana, 'Times New Roman'; font-size: 14px; font-size-adjust: 0.58">jakiś tekst...</p>

UWAGA! Polecenie wchodzi w skład CSS 2.0, ale nie CSS 2.1. Ostatecznie pojawiło się znowu w CSS 3.

Przykład {font-size-adjust}

Czcionka 'Times New Roman' - proporcje 0.58

Podstawowa czcionka 'Times New Roman' (domyślnie o proporcjach 0.46)

Czcionka Verdana (domyślnie o proporcjach 0.58)

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
font-size-adjust: wartość	127 2024-07-23	3 2008-06-17	127 2024-07-25	113 2024-08-22	16.4 2023-03-27

CSS 3

selektor { font-kerning: tryb }

Aby tekst wyglądał estetycznie, odległości między wszystkimi sąsiadującymi znakami powinny być podobne. Kształt niektórych par liter powoduje jednak, że kiedy występują obok siebie, stwarzają wrażenie, jakby odstęp pomiędzy nimi był większy niż w rzeczywistości. Typowym przykładem mogą być np. wielkie litery: A V. Ponieważ ich kształt jest komplementarny - odwrócone względem siebie kontury trójkąta - odstęp pomiędzy nimi wydaje się być wyjątkowo duży. W pewnych przypadkach czytelnik mógłby nawet uznać, że wchodzą w skład osobnych wyrazów w tekście.

Kerning to sposób na regulowanie odległości pomiędzy konkretnymi parami znaków w tekście. Dzięki niemu pusta przestrzeń pomiędzy sąsiadującymi znakami wygląda tak samo, chociaż fizycznie odległość między nimi nie musi być taka sama. Zwykle zdanie się tutaj na domyślne działanie przeglądarki jest najlepszym rozwiązaniem. Jednak czasami dla niektórych rodzajów i wielkości czcionek znaki w tekście mogą wydawać się dziwnie nierówno od siebie oddalone albo nieczytelne. Dlatego jeśli domyślny sposób wyświetlania tekstu nas nie satysfakcjonuje, pomocne może być wymuszenie albo zablokowanie kerningu.

font-kerning w odróżnieniu od letter-spacing nie dodaje jednakowego odstępu pomiędzy literami tekstu, ale dopasowuje go w zależności od tego, jakie znaki ze sobą sąsiadują.

Przykład {font-kerning}

Zwróć uwagę, że w pierwszym przypadku poniżej (bez kerningu) pusta przestrzeń pomiędzy literami "AV" powinna wydawać się większa - jeżeli byśmy narysowali linię łączącą prawy-dolny wierzchołek litery "A" z lewym-górnym wierzchołkiem litery "V", to byłaby ona mniej więcej pionowa, podczas gdy w drugim przypadku (z kerningiem) litery te wyraźnie na siebie zachodzą:

Zauważ, że przy zablokowanym kerningu (pierwszy przypadek powyżej) wydaje się, jakby litery "AV" były położone dalej od siebie niż kolejne litery "VX". Tak ułożony tekst z pewnością trudniej się czyta i wygląda mniej estetycznie.

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
font-kerning: wartość	33 2014-02-20	32 2014-09-02	79 2020-01-15	20 2014-03-04	9 2015-09-30

Poniżej znajdziesz wykaz najczęściej zadawanych pytań z tego rozdziału wraz ze zwięzłymi odpowiedziami i gotowymi do użycia przykładami kodu CSS. Aby sprawdzić bardziej szczegółowy opis, kliknij odnośnik "Zobacz więcej..." pod wybraną odpowiedzią.

Sprawdź, czy pamiętasz, za co odpowiadają poniższe fragmenty kodu źródłowego CSS. W razie wątpliwości kliknij odnośnik "Zobacz więcej..." pod wybraną grupą przykładów.

Jak zmienić rozmiar (wielkość) czcionki? Jaki jest najlepszy sposób ustalania wielkości czcionki?

selektor { font-size: rozmiar }

Zobacz więcej...

Jak zmienić rodzaj (krój) czcionki? W jaki sposób maksymalnie zabezpieczyć się przed wyświetleniem tekstu niechcianym krojem czcionki?

selektor { font-family: rodzaj, rodzaj1, rodzaj2,... }

Zobacz więcej...

W jaki sposób wczytać czcionkę z pliku?

<head>
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=rodzaj">
	<style>
	selektor { font-family: rodzaj }
	</style>
</head>

Zobacz więcej...

W jaki sposób wprowadzić czcionkę pochyloną (kursywa)? Czym różni się styl "italic" od "oblique"?

selektor { font-style: styl }

Zobacz więcej...

Jak wprowadzić czcionkę pogrubioną? Czy można wytłuścić tekst z różną intensywnością?

selektor { font-weight: waga }

Zobacz więcej...

W jaki sposób przekształcić zwykły tekst w kapitaliki, czyli napisany wielkimi literami, lecz czcionką o wysokości małych liter?

selektor { font-variant-caps: wariant }

Zobacz więcej...

W jaki sposób sprawić, aby niektóre litery w tekście były ze sobą bardziej zlane tworząc estetyczne połączenie graficzne (ligatury)?

selektor { font-variant-ligatures: warianty }

Zobacz więcej...

Co zrobić, aby liczby w kolumnach tabeli z danymi były ułożone równo pod sobą? W jaki sposób wyświetlić licznik i mianownik rozdzielone kreską ułamkową?

selektor { font-variant-numeric: warianty }

Zobacz więcej...

W jaki sposób dodać indeks dolny lub górny tak, aby sąsiednie linijki tekstu nie były między sobą nieestetycznie rozsunięte?

selektor { font-variant-position: wariant }

Zobacz więcej...

W jaki sposób określić w jednym poleceniu wiele własności wariantu czcionki: połączenie liter (ligatury), wielkość liter (kapitaliki), formatowanie liczb oraz wyglądu indeksów dolnych i górnych w tekście?

selektor { font-variant: wartości atrybutów }

Zobacz więcej...

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 }

Zobacz więcej...

W jaki sposób rozciągnąć lub ścieśnić czcionkę?

selektor { font-stretch: rozciąg }

Zobacz więcej...

Co zrobić, aby czcionka na ekranie zawsze była tak samo czytelna, bez względu na jej krój (rodzaj)?

selektor { font-size-adjust: proporcje }

Zobacz więcej...

W jaki sposób regulować odległość pomiędzy sąsiednimi znakami tekstu (kerning) tak, aby wyglądał bardziej estetycznie i był czytelniejszy?

selektor { font-kerning: tryb }

Zobacz więcej...