Kurs języka HTML i CSS

Poradnik webmastera

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

Google Web Fonts

Email Drukuj PDF

Google rozwija zbiór publicznie dostępnych czcionek, które można wykorzystywać na stronach internetowych - Google Web Fonts.

W momencie pisania tych słów (kwiecień 2011 czerwiec 2012) dostępnych jest ponad 170 500 czcionek.

Aby skorzystać z czcionki, wystarczy skopiować kod obejmujący dwa elementy:

W sekcji HEAD umieszczamy odwołanie do danej rodziny czcionek, na przykład:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Amaranth:regular" />

W stylach umieszczamy kod definiujący styl jakiegoś fragmentu, np. akapitu - najlepiej zdefiniować tu klasę stylu, ale oczywiście można też stosować styl lokalny (inline):

<style> 
p.jakas_klasa {  font-family: 'Amaranth', serif; } 
</style>

Efekt na stronie:

Akapit z fontem Amaranth.
Przykład akapitu z fontem Cantarell.

Jeśli zechcemy skorzystać z kilku czcionek, musimy podać odwołania do wszystkich. Zamiast jednak podawać kilka kolejnych poleceń link rel= możemy podać na przykład (czcionki Tangerine, Inconsolata i Droid Sans):

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans" />

Można też ograniczyć definicję do podzbioru, np.:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans:italic" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans:bold" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans:regular" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans:bolditalic" />

Tylko część czcionek zawiera polskie znaki - albo wbudowane, albo generowane na tyle zręcznie, że nie powodują wizualnego dyskomfortu.

Anton, Architects Daughter, Bentham, Bevan, Cantarell, Coda, Coda Caption, Corben, Covered By Your Grace, Crimson Text, Crushed, Droid Sans Mono, GFS Didot, GFS Neohellenic, Gruppo, rodzina IM Fell, Inconsolata, Indie Flower, Just Another Hand, Just Me Again Down Here, Lekton, Luckiest Guy, Meddon, Merriweather, OFL Sorts Mill Goudy TT, Oswald, Radley, Reenie Beanie, Six Caps, Syncopate, Terminal Dosis Light. 

Użytkownicy przeglądarki Chrome mogą skorzystać z rozszerzenia Google Font Previewer, za pomocą którego można szybko uzyskiwać kod wstawiany na stronę czy w blogu.

Google Font Previewer dla Chrome

 

 

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