Zestaw czcionek z polskimi znakami gotowych do użycia z @font-face
Niestandardowe czcionki są obecnie bardzo cenionym elementem wielu stron internetowych. Dzięki możliwościom oferowanym nam przez funkcje @font-face, jesteśmy w stanie w prosty sposób wzbogacić i urozmaicić projektowane przez nas serwisy. O ile dla anglojęzycznych webdeveloperów możliwości są ogromne, a ilość czcionek jest wręcz niewiarygodna, to dla rodzimych twórców jest to już pewien kłopot. Chodzi oczywiście o polskie znaki, które bardzo często są pomijane przez twórców. Dlatego podobnie jak przy poprzednim zestawie czcionek z polskimi znakami i tym razem przedstawiam kilka darmowych fontów posiadających polskie znaki, mogące być wykorzystane komercyjnie i możliwe do wstawienie przy pomocy funkcji @font-face.
Lato
Uwaga! Jak słusznie zauważył Tomek w komentarzu, czcionka ta nie posiada polskich znaków. W związku tym, że autor Łukasz Dziedzic napisał, iż znaki te pojawią się na początku 2011 roku i ponieważ jest to font polskiego autorstwa postanowiłem jednak nie usuwać go z listy. Napewno warto śledzić tą czcionkę.
Anivers regular
5 czcionek z polskimi znakami gotowych do użycia z @font-face
Dzięki zastosowaniu nowych możliwości CSS3 dostaliśmy możliwość dodania niestandardowych czcionek do projektów graficznych naszych stron. O ile wyszukanie czcionek udostępnionych do użycia przy pomocy @font-face nie stanowi większego problemu, to znaleźć taką, która posiada wszystkie polskie znaki, sprawia już pewne problemy. Dlatego w tym artykule chciałbym przedstawić kilka profesjonalnie prezentujących się fontów gotowych do użycia w waszych kolejnych projektach.
MyFairCody
Graublau-Sans
@font-face – własna czcionka na stronie internetowej
Typografia jest uznawana za jeden z najważniejszych czynników, uwzględnianych przy projektowaniu stron lub dowolnego elementu identyfikacji wizualnej. Obecnie jednak standardowy zestaw czcionek, jest niewystarczający do tworzenia pięknych i unikalnych projektów. Wielu grafików zaczęło sięgać po niestandardowe, często płatne zestawy fontów. O ile w przypadku identyfikacji wizualnej nie stanowiło to większego problemu, to dla stron internetowych pojawiały się znaczące komplikacje. Programiści musieli iść z duchem czasu i w jakiś sposób zaimplementować niestandardowe czcionki. Tym sposobem powstały m.in. sIFR, Cufon, FLIR, każde z nich miało swoje wady i zalety, ale dawały oczekiwany efekt. Wraz z nadejściem CSS3 programiści dostali nową opcje, czyli @font-face.
@font-face
@font-face jest regułą CSS, przy pomocy, której możesz ściągnąć, potrzebną do prawidłowego wyświetlania strony czcionkę, jeżeli jest ona nieobecna na komputerze użytkownika. Działa to w bardzo prosty sposób i polega na dodaniu tych linii kodu do naszego stylu CSS:
@font-face {
font-family: 'ExistenceLight';
src: url('../Existence-Light-webfont.eot');
}Jak widać powyżej definiujemy nową rodzinę czcionek, którą potem możemy wykorzystywać w dalszej części naszego kodu CSS. Podajemy jej nazwę, oraz wskazujemy na plik, który ewentualnie ma się ściągnąć. Wykorzystanie takie kodu może wyglądać tak:
h1 {
font: 60px/68px 'ExistenceLight', Arial, sans-serif;
letter-spacing: 0;
color:#930;
margin:20px 0;
}
p {
font: 16px/22px 'ExistenceLight', Arial, sans-serif;
letter-spacing: 1px;
margin-bottom: 10px;
}Zobacz jak prezentuje się efekt naszego kodu - demo.
Oczywiście nie może być zbyt pięknie i standardowo pojawiają się problemy w przypadku różnych przeglądarek. Zanim do tego przejdę, wypada poinformowanie, że opcja ta najwcześniej, bo już od wersji 4.0, zaimplementowana była w Internet Explorer. Obecnie wszystkie nowe przeglądarki wspierają tą regułę. Problem stanowi to, iż każda przeglądarka obsługuje różne formaty czcionek. I tak:
- Internet Explorer – EOT
- Chrome – TTF i SVG
- Mozilla – WOFF, OTF i TTF
- Opera i Safari – TTF, OTF i SVG
Bounce – podziel się opinią na temat projektu strony
Podczas projektowania stron internetowych opinia jak największej liczby osób, może być nieocenioną pomocą, zarówno dla wyglądu strony jak i jej użyteczności. Tutaj z pomocą przychodzi nam rewelacyjne narzędzie firmy ZURB – Bounce. Aplikacja ta pozwala nam na szybką wymianę opinii na temat poszczególnych elementów strony, za pomocą prostych notatek zamieszczanych na ocenianym projekcie.
Jak to działa?
Obsługa tej aplikacji jest wręcz banalnie prosta. Na stronie głównej podajemy link do strony lub podstrony projektu, który chcemy oceniać. Po krótkiej chwili program przedstawi nam zrzut ekranu naszej podstrony i poprosi o podanie imienia. W przypadku wysyłania projektu do dużej liczby osób polecam podawania przynajmniej swojego Nicka, gdyż jest on podawany przy notce, jaką dodaliśmy na stronie i pozwala na łatwiejszą komunikację.
Czytaj dalej...Jak dodać polskie znaki do dowolnej czcionki
Ile razy zdarzyła Ci się taka sytuacja: Znajdujesz tego idealnego, jedynego fonta który pięknie pasuje do twojego projektu a tu zamiast Ą wyskakują Ci jakieś krzaczki? Niestety wiele zagranicznych fontów nie posiada polskich znaków diakrytycznych, a wybór spolszczonych jest niewielki. Dzisiaj pokażę CI jak dodać nieistniejące znaki do czcionki.
Instalujemy niezbędne oprogramowanie
Aby dodać polskie znaki diakrytyczne potrzebny nam jest edytor czcionek, do wyboru jest wiele, darmowych i płatnych. Ja osobiście polecam FontForge. Jest to program OpenSource napisany dla systemu operacyjnego Linux. Nie należy się tym przejmować ponieważ deweloper przewidział możliwość instalacji na platformie Windows.
Aby program ruszył w Windows potrzebujemy zainstalować emulator środowiska Linuksa, program Cygwin. Pobieramy go z strony http://cygwin.com/ i rozpoczynamy proces instalacji. Program zapyta nas o ścieżkę programu, rodzaj instalacji, serwer pobierania i w końcu o wybór paczek do zainstalowania. Prędkość instalacji zależy głównie od wybranego serwera i naszego łącza. Ja polecam niemiecki i irlandzkie serwery FTP. Aby FontForge działał poprawnie należy zainstalować:
- podstawowe pliki programu
- system X Windows
- binutils
- lbng et libxm12
- X11
- X-startup-scriptsm
- XFree86-lib-compat
- xorg-x11-base
- xorg-x11-bin
- xorg-x11-dlls
- xorg-x11-lndir
- xorg-x11-etc
- xorg-x11-f100
- xorg-x11-libs-data
Niezaawansowani użytkownicy albo osoby które nie mają czasu i ochoty bawić się w dobieranie paczek mogą zwyczajnie zaznaczyć opcje instalacji wszystkiego, potrwa to trochę dłużej i zajmuje około 6GB miejsca na dysku.
Następnie należy pobrać paczki instalacyjne programu FontForge z strony http://fontforge.sourceforge.net/. Pobieramy pliki przeznaczone dla Cygwina czyli: fontforge_cygwin-20090914.tar.bz2. Paczkę tą należy pobrać do katalogu programu Cygwin. Domyślnie jest to: C:\cygwin\home\<username> (<username> to twoja nazwa użytkownika).
Teraz należy uruchomić Cygwina (w menu START i na pulpicie pod nazwą CygwinBashShell, ścieżka na dysku C: \cygwin\Cygwin.bat). Pojawi nam się okno konsoli. Wklepujemy w niej kolejno (z pominięciem znaku $):
$ tar xjf fontforge_cygwin-*.tar.bz2
$ cd fontforge
$ ./doinstall
Cygwin kolejno rozpakowuje FontForge, wchodzi do jego katalogu a następnie go instaluje (te operację wykonujemy tylko raz).
Czytaj dalej...
