Mediovski Technology

@font-face – dowolne czcionki na strone

Data: 28 July 2011 10:05 AM 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 Comments »

  1. Comment by piecioshka — 28 July 2011 @ 10:26 AM

    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 by krzysztof.kwiatkowski — 28 July 2011 @ 6:45 PM

    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 by verso — 26 November 2011 @ 3:14 PM

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

  4. Comment by Paweł Kaczmarek — 28 November 2011 @ 8:43 AM

    Ł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>

RSS feed for comments on this post. TrackBack URL

Leave a comment


six - 3 =

Get Adobe Flash playerPlugin by wpburn.com wordpress themes
RSS