Font Previewer: stwórz CSS dla dowolnego fontu z google'owego Font API

W maju br. Google podczas konferencji I/O poinformowało o udostępnieniu katalogu fontów webowych, który miał ułatwić webdeweloperom stosowanie ładnych krojów pisma na ich witrynach. Font API potrafiło przekształcić dany krój w format odpowiedni dla danej przeglądarki – czy byłyby to nowoczesne Chrome lub Firefox, czy też stareńkie IE6. Teraz interfejs został wzbogacony o świetne narzędzie: Font Previewer, pozwalający na wizualne dopasowanie potrzebnego nam fontu i wygenerowanie odpowiedniego kodu CSS.

„Teraz, kiedy odwiedzisz stronę rodziny fontów, zobaczysz link 'Preview this font', który załaduje twój wybór do wyświetlarki fontów” – wyjaśnia Marc Tobias Kunisch z zespołu Google Font API.

Wyświetlarka Font Previewer jest bardzo rozbudowaną aplikacją. Pozwala na wpisanie przykładowego tekstu, wybór rodziny fontów, rozmiaru i wariantu, regulację kerningu i interlineacji, transformacji liter, dekoracji a nawet dodania cieni (przez własność CSS text-shadow).

Jak widać, Font Previewer nie ma żadnych problemów z polskimi "ogonkami".

Po ustaleniu wymaganych parametrów, w okienku formularza wyświetlony zostaje pełen kod CSS, wymagany do wykorzystania przygotowanego przez nas fontu na witrynie. Wystarczy go tylko skopiować i wkleić do strony. Trzeba oczywiście pamiętać o wykorzystaniu javascriptowego loadera, który pozwala na ładowanie udostępnionych w katalogu fontów krojów i ujednolicenie ich zachowania w różnych przeglądarkach.

Obecnie w Google Font API znajduje się już wiele fontów, przydatnych także w polskich warunkach – czyli z pełnym zestawem znaków diakrytycznych naszego języka, dlatego rozwiązanie to powinno szybko zyskać na popularności – jest znacznie wygodniejsze w użyciu, niż rozmaite sztuczki, korzystające np. z dynamicznie renderowanych obiektów Flasha. Warto podkreślić też, że Font Previewer bez najmniejszych problemów współpracuje z popularną u nas Operą.

Źródło: googlecode.blogspot.com

Podoba Ci się ten tekst? Powiedz o tym innym na Fb: lub na G+:

publikuj:

wydrukuj

4 skomentuj »

Polecamy

Reklama

Komentarze

#1 code-and-glory.com 2010-07-29 14:29:29 0
Niestety, polskie znaczki zawiera tylko garstka czcionek.
IP: 83.24.65.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/533.4 (KHTML, like Gecko) Chrome/5.0.375.99 Safari/533.4
#2 eimi^® 2010-07-29 15:03:11 0
na początku w ogóle nie było fontów z polskimi znaczkami, więc jest dobrze :). Postęp.
IP: 95.160.206.[...] Mozilla/5.0 (X11; U; Linux x86_64; en-US) AppleWebKit/533.4 (KHTML, like Gecko) Chrome/5.0.375.99 Safari/533.4
#3 mmatti 2010-07-30 09:01:41 0
Tylko dlaczego w artykule nigdzie nie ma linku do omawianej wyświetlarki? Trochę to bez sensu..

Link to: http://code.google.com/webfonts/preview#font-family=Cantarell
IP: 83.10.158.[...] Mozilla/5.0 (Windows; U; Windows NT 6.0; pl; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8
#4 _rafal 2010-08-02 19:33:45 0
Polecam zapoznac sie z mozliwosciami Cufona http://wiki.github.com/sorccu/cufon/
IP: 84.10.145.[...] Mozilla/5.0 (Windows; U; Windows NT 6.1; pl; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8

Aby dodać komentarz, musisz podać swój nick, treść komentarza oraz poprawnie przepisać oba słowa z obrazka (słowa muszą być rozdzielone spacją).
W treści komentarza można używać języka formatowania BBcode.