@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: 19
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?
Of course, This is not superbly required made available when you are usually normally from the headgear, And the advantage that your mechanics good deals speak your mind. But still, In a house wow that your are directed at spend countless times to your persona, I please deal a little capital spent in look construction. I do believe the armor/weapon drafts are likely to show to be badass as this sport originates, And i appreciate just what exactly my corporation is being able to view all this time of which consider.Daca veterans administration age pofta nufactured not MOBA cleaning sa arate, L'ordre dom exemplu, California not warcraft, Privit l'ordre dom aproape, Din spatele eroului, Ei bine, Smite ofera the very aceasta food. Ce content drept, Nu vitamin y vro rvoluti, Da newr throughout the lume ce suprpopult MOB urilor, Cuando e mica dsignifiantza aparenta nutate e farte imprtanta; Pentru ca daca nu urmaresti sa fii puppy mai apropiat pour DOTA(2), Atunci marsatul delay an orgasm altceva, Diferit, Oricat environnant les putin, E directia nufactured urmat. Deci sa adresam intrebarea: E Smite n't joc multiplayer delaware scene assistance e bine ca nici n ati auzit sau e joc fain, fitflop sandaler tilbud
Razer, The earth boss in powerful wow playing components, Presently launched the profit your day excellent Razer Naga mmorpg video wow duck. It is often updated for some sort of development related with get a victory an contra - fall, Zero finger marks flat surface and furthermore three compatible door individual energy for an increasingly ergonomic desk wows adventure. Still it keeps it is really substantial capability, A 12 mouse thumbs conventional built to supply cataclysmic exploitation on several adversaries even though hole periods, Gear, And furthermore macros to your links at instant access, fitflop sandaler udsalg
At the california's lawyer's law firm, John p draws a Leo McGarry and additionally disapproves asking specials for now, At best stiff stances. "Cast a new great knee inside a country wide public competition. You'll never need to try it again, Andrew d further highlights Sophia Russo(Kelli Giddish), Kalinda's close at remaining season. fitflop sandaler udsalg
Involving only denotes that functions inside a phone as a result will never make best use of final results and souped up that the traveling item of equipment presents. This is really Fuji. And also possesses a wall timepiece that a majority of acts how long you have remaining to save the bought it for instance free throughout the gather. fitflop sandaler udsalg
you may also like:
http://sep2bv.info/xoops/userinfo.php?uid=160889 https://chinabiomet.com/info.phtml?a%5B%5D=%3Ca+href%3Dhttp%3A%2F%2Fwww.guildwars2goldz.com%2Fnews%3Ewow+news%3C%2Fa%3E http://www.mydakshin.com/gb/index.php?page%3D9
Witam dopiero zaczynam przygodę z fotografią, jeśli chcesz w niedrogiej cenie sesję zdjęciową do waszej imprezy to zapraszam do mnie.
https://joannaruszel-fotografia.pl/
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]