Mediovski Technology

@font-face – dowolne czcionki na strone

Data: 28 Lipiec 2011 10:05 Autor: Paweł Kaczmarek | Kategoria: css

Dotychczas aby użyć niestandardowej czcionki na stronie www stosowaliśmy cufón lub  sIFR (Scalable Inman Flash Replacement) .

Każdy kto używał tych metod wie że wiążą się one z pewnymi ograniczeniami, niedogodnościami.

Od pewnego czasu istnieje znacznie lepszy sposób, który pozwala użyć dowolnej czcionki na stronę, która będzie się wyświetlać poprawnie we wszystkich przeglądarkach łącznie z IE6.


Za pomocą @font-face jesteśmy w stanie dołączyć do naszej strony dowolne czcionki.

Poniżej przykład prawidłowego użycia @font-face w pliku css:

@font-face {
font-family: 'DroidSansRegular';
src: url('../fonts/droidsans-webfont.eot');
src: url('../fonts/droidsans-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/droidsans-webfont.woff') format('woff'),
url('../fonts/droidsans-webfont.ttf') format('truetype'),
url('../fonts/droidsans-webfont.svg#DroidSansRegular') format('svg');
font-weight: normal;
font-style: normal;
}
 
body{font-family: DroidSansRegular}

Czcionki umieszczone są w folderze /fonts i przesłane na serwer razem z innymi plikami.

Pytanie brzmi: skąd wziąć czcionki w takich formatach?

Na stronie http://www.fontsquirrel.com/fontface/generator znajdziemy genialne narzędzie do generowania czcionek za pomocą którego używanie niestandardowych czcionek staje się banalnie proste ;)

RSS
Get Adobe Flash player