Jeszcze lepsze osadzanie fontów z pomocą @font-face
W ostatnio opublikowanym poradniku używałem kodu zaproponowanego przez Paula Irisha. Tymczasem okazuje się, że do używania własnych czcionek przez @font-face na wszystkich przeglądarkach wystarczy znacznie prostszy hack. Jest tak zgrabny, że do zwykłego, czystego kodu wystarczy dodać jeden znak.
@font-face {
font-family: 'MojFont';
src: url('mojFont.eot?') format('eot'),
url('mojFont.woff') format('woff'),
url('mojFont.ttf') format('truetype'),
url('mojFont.svg#font') format('svg');
}
Piękne w powyższym kodzie jest to, że jedynym dodatkowym elementem jest znak zapytania postawiony na końcu URLa do pliku dla Internet Explorera. Cała reszta to najzwyczajniejszy i najbardziej poprawny kod w życiu. Powyższe rozwiązanie zaproponował Ethan Dunham i wyjaśnia, że kiedy IE zauważa znak zapytania, myśli że dalsza część kodu to po prostu URL w postaci jakiej używają języki server-side (po nim najczęściej dopisuje się kolejne zmienne np. index.php?nme=lore). Najpiękniejszy hack jaki widziałem.
Komentarze
Co nie zmienia faktu że dodanie * {font-family:none !important;} dla aktualnie odwiedzanych witryn, które używają tego "dobrodziejstwa" gdzie popadnie, jest bardzo pomocne ;)
Łukasz: W twojej przeglądarce nie da się po prostu wyłączyć webfontów?
Tu jest bardzo fajny krój. Uwielbiam skondensowane, choć ja bym znacznie powiększył tekst (mam awersję do mikrusów w Sieci przez rozdzielczość 1920×1080px).
Livio: High five! ;) Większy tekst pociągnąłby za sobą poszerzenie layoutu (bo z takim wygląda średnio), a na to jeszcze sobie pozwolić nie mogę.