Szybkie triki: podmiana czcionki za pomocą Google Fonts API



Szybkie triki: podmiana czcionki za pomocą Google Fonts API

Jak zapewne wiecie w Labsach Googla rozwija się coraz więcej projektów. Jednym z najnowszych na który chciałbym zwrócić waszą uwagę jest Google Fonts API. Jak na porządne API Googla przystało, cechuje się ono zdumiewającą prostotą użycia, co sprawia, ze wykorzystanie niestandardowych czcionek na stronie zajmuje dosłownie sekundy.

Użycie

Aby zintegrować daną czcionkę z szablonem wystarczy wstawić na stronie link do czcionki, a następnie można się już do niej odwołać za pomocą font-family. I to tyle:

  1. <head>
  2.  <meta charset="utf-8">
  3.  <title>untitled</title>
  4.         <link href='http://fonts.googleapis.com/css?family=Molengo'
  5.          rel='stylesheet' type='text/css'>
  6.  <style>
  7.  body { font-family: 'Molengo', serif; font-size: 100px; }
  8.  </style>
  9. </head>
  10. <body>
  11.      
  12. </body>

Opcje

Dodatkowo mamy kilka możliwości modyfikacji linka, którym zaciągamy czcionkę. Np możemy pobrać kilka czcionek na raz i odpowiednio po nazwie się do nich odwoływać. Link wyglądałby następująco:

  1. http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans

Ponadto mamy również wpływ na formatowanie czcionki, tzn. możemy je załadować z opcjami: bold, italic i bolditalic. Link wyglądałby następująco:

  1. http://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold

Zestawienie wszystkich dostępnych czcionek i ich krojów możecie znaleźć na stronie:
http://code.google.com/webfonts

Strona jest bardzo przejrzyście i funkcjonalnie zrobiona, pozwala zapoznać się z przykładami krojów czcionek, można zobaczyć dostępne znaki, jak również prezentuje kawałki kodu które należy wkleić na stronie by móc z danej czcionki skorzystać.

I wszystko by było wręcz idealnie gdyby tylko były polskie czcionki… miejmy nadzieję, że w miarę rozrastania się projektu będą dochodzić coraz lepsze czcionki z coraz większymi zestawami znaków. :)

Z dnia na dzień przybywa coraz więcej czcionek i tak! także polskich! :) (wielkie dzięki dla czujnych czytelników)

Related Posts with Thumbnails
Prześlij dalej:
Digg Google Bookmarks reddit Mixx StumbleUpon Technorati Yahoo! Buzz DesignFloat Delicious BlinkList Furl

9 komentarze do “Szybkie triki: podmiana czcionki za pomocą Google Fonts API”

naprawdę ciekawe API :) , szkoda tylko, ze nie działa pod Operą :/

commenter

no to prawda, nie działa, ale tylko pod starszą wersją. poza tym po FF chwilę to zajmuje żeby standardowa czcionka została podmieniona na załadowaną z API, więc widać przeskok :] za to zdumiewająco dobrze działa pod IE :D

Interesujące :) chociaż faktycznie brak polskich znaków jest delikatnie rzecz ujmując irytujący, zwłaszcza dla osób dbających o eleganckie posługiwanie się językiem. Nic tak nie denerwuje jak brak polskich znaków :)

commenter

Ile już sposobów na podmianę czcionek powstało. Nadal pozostaje tylko jeden i ten sam problem – czcionki z polskimi znakami diakrytycznymi.

widać, że Google się stara i już niektóre czcionki są dostępne w wersji polskiej – polecam sprawdzić:
http://code.google.com/webfonts/preview

commenter

@Alchemy: Jak duży przeskok (procentowo) odnotowałeś po korzystaniu z tego API w odniesieniu do wykorzystywania standardowych czcionek?

commenter

Nie jestem Ci w stanie podać procentowych wartości, ale przeskok jest zauważalny, a jednocześnie zdecydowanie krótszy niż w przypadku wykorzystywania pluginów typu Cufón. Inną wadą do niedawna było różne zachowanie i renderowanie czcionek w różnych przeglądarkach, jednakże ostatnio Google wprowadził WebFont Loader sprawiający ze wszystkie przeglądarki podmieniają tekst tak samo jak FireFox.

Właściwie czym to się różni od @font-face?

commenter

a kto powiedział, że się różni? :) Google Fonts API wykorzystuje @font-face do zagnieżdżania czcionek.

Zostaw komentarz:

Imię (wymagane):
Email:
Strona www:
Komentarz (wymagany):
XHTML: W komentarzach możesz korzystać z nastepujących tagów: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
-