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 ;)

4 komentarzy »

  1. Comment - autor: piecioshka — 28 Lipiec 2011 @ 10:26

    Hej,

    Niestety FF 3.0 tego nie obsługuje ;(

    Link do strony z supportem:
    http://webfonts.info/wiki/index.php?title=@font-face_browser_support

  2. Comment - autor: krzysztof.kwiatkowski — 28 Lipiec 2011 @ 18:45

    To zdecydowanie najbardziej “przyszłościowy”(!) sposób, jednak niestety i on wiąże się z paroma niedogodnościami, np.:
    * problemy z wygładzaniem czcionek
    * problemy prawne (niektórych czcionek nie można osadzać w ten sposób)

  3. Comment - autor: verso — 26 Listopad 2011 @ 15:14

    a czy tą metodą font nie ładuje się przy każdym odświeżeniu strony?

  4. Comment - autor: Paweł Kaczmarek — 28 Listopad 2011 @ 8:43

    Ładowanie fontów można cachować używając np .htaccess

    <FilesMatch "\.(eot|woff|ttf|svg)$">
    Header set Expires "Thu, 15 Apr 2020 20:00:00 GMT"
    </FilesMatch>

Kanał RSS z komentarzami do tego wpisu. Adres URL dla TrackBacków

Dodaj komentarz


* 3 = eighteen

Get Adobe Flash playerPlugin by wpburn.com wordpress themes
RSS