second gate studio blog

Autorem tego bloga jest zx. Na stronie zajmuję się szeroko pojętym user-experience i takoż pojętym designem. Piszę o technologii, pokazuję rzeczy zaprojektowane z wyczuciem, dbałością o szczegóły i szukam inspiracji w każdej możliwej dziedzinie. Kontakt.

Wpis dodany roku w kategoriach HTML, CSS, JS, Techblog, Typografia i otagowany słowami: css, html, style, www, Trackback.

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

Łukasz 20:16:40 | 05 lutego 2011

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

zx 20:35:16 | 05 lutego 2011

Łukasz: W twojej przeglądarce nie da się po prostu wyłączyć webfontów?

Livio 12:57:20 | 06 lutego 2011

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

zx 19:41:55 | 06 lutego 2011

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ę.