Używanie atrybutu @font-face

Arkadiusz Meszka    14 października 2016 | Ostatnia modyfikacja: 15 października 2016

Aby zapewnić najszersze możliwe wsparcie przeglądarek, musimy dysponować wieloma formatami czcionek – eot, woff, woff2, ttf, svg. Poniższy kod przedstawia przykład najszerszego wsparcia dla danej czcionki.

@font-face {
font-family: 'MojaCzcionka';

src: url('webfont.eot'); /* IE9*/
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Najnowsze przeglądarki */
url('webfont.woff') format('woff'), /* Też najnowsze, ale sięga  bardziej wstecz*/
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS i większość przeglądarek */
url('webfont.svg#svgFontName') format('svg'); /* Starsze iOS */
}

Po zdefiniowaniu czcionki w ten sposób, możemy jej użyć np. dla akapitów w ten sposób:

body {
font-family: 'MojaCzcionka',  sans-serif;
}

Jednak posiadanie czcionki w tylu formatach nie jest niezbędne. Aby przyzwoicie działało na praktycznie wszystkich współczesnych urządzeniach, wystarczy format ttf i woff. Wsparcie dla poszczególnych formatów czcionek można sprawdzić na caniuse.com

Udostępnij wpis
Kategorie: HTML/CSS
1 Gwiazdka2 Gwiazdki3 Gwiazdki4 Gwiazdki5 Gwiazdek
Loading...

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *