@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
Jak widać do w miarę optymalnej pracy potrzebujemy około 4 formatów tej samej czcionki. Jeżeli już posiadamy wszystkie pliki, musimy teraz zmodyfikować tak kod CSS, aby obsłużył wszystkie pliki. Z pomocą przychodzi nam kod, którego autorem jest Paul Irish:
@font-face {
font-family: 'ExistenceLight';
src: url('../Existence-Light-webfont.eot');
src: local('☺'), url('../Existence-Light-webfont.woff') format('woff'),
url('../Existence-Light-webfont.ttf') format('truetype'),
url('../Existence-Light-webfont.svg#webfontPttmTjhw') format('svg');
font-weight: normal;
font-style: normal;
}Nie będę wnikał w szczegóły tego kodu. Myślę, że wystarczy wyjaśnić, że znak twarzy służy do tego, aby nasza strona używała naszego pliku z czcionkami nawet, jeżeli użytkownik ma ją czcionkę o tej samej nazwie zainstalowaną na komputerze. Dwie ostatnie definicje ustawione na normal sprawiają, że przeglądarki oparte o Webkit będą wspierać obie te komendy w późniejszych stylach.
Co warto wiedzieć?
Czasami czcionki zmodyfikowane poprzez CSS, np pogrubione, mogą się bardzo brzydko renderować. Wynika to z właściwości samej czcionki i często w takich przypadkach przygotowane są osobne pliki z pogrubioną lub pochyloną czcionką. Warto również pamiętać, że font idealnie pasujący do nagłówków, nie koniecznie musi się nadawać do standardowej treści. W tym przypadku zdecydowanie polecam stosowanie standardowych rozwiązań.
Kolejna rzecz, na którą musze was uczulić są licencje czcionek. Bardzo duża część udostępnionych fontów nie pozwala na ich dystrybucje pod żadną postacią. To znaczy, nie możemy dać czcionki do ściągnięcia poprzez nasz skrypt nawet, jeżeli czcionka umożliwia wykorzystanie jej w celach komercyjnych. Jest to bardzo ważna sprawa, o której bezwzględnie należy pamiętać. Na szczęście pojawiło się kilka stron, które udostępniają czcionki na licencji zgodnej z @font-face np. http://www.fontsquirrel.com
Ostatnią sprawą, o której musicie pamiętać są polskie znaki w waszych czcionkach. Nie wszystkie udostępnione fonty posiadają polskie znaki diakrytyczne. Jeżeli licencja czcionki na to pozwala, można samemu dodać polskie znaki, według metody z naszego wcześniejszego artykułu. Jeżeli nie mamy możliwości modyfikacji, nie pozostaje nam nic innego jak poszukać innej, podobnej czcionki.
FontSquirrel @font-face generator
Omawiają @font-face, nie można nie wspomnieć o udostępnionym na stronie FontSquirrel generatorze. Jest to rewelacyjne narzędzie, dzięki któremu na podstawie naszego pliku z czcionką, zostaną wygenerowane brakujące formaty oraz przygotowany zostanie dla nas styl CSS gotowy do zamieszczenia na docelowej stronie. Narzędzie to znacznie ułatwia prace i gorąco polecam jego stosowanie.
DyskusjaKomentarze: 8
Zacząłem od http://www.fontsquirrel.com/fonts/TitilliumText
Niestety nie pokazują mi się ogonki w żaden sposób. Oczywiście czcionka posiada polskie znaki.
Czy są jakieś specjalne triki pozwalające wyświetlać polskie znaki??
pozdrawiam
pozdro
jest font_face http://www.webnote.pl/example/font_face
nie ma: http://webnote.pl/example/font_face
baz "www." nie pokazuje fontface, o co chodzi?
Dodaj komentarz Komentarze są moderowane, a przy linkach używane jest rel="nofollow". Prosimy o nie reklamowanie i nie spamowanie w komentarzach.
Linki tworzone za pomocą tagu [url] np: [url=www.xyz.pl]xyz[/url]
Źródła za pomoc tagu [code] z wskazaniem języka np. [code=php] echo [/code]