Пользовательские веб-шрифты

Question

Я полагаю, что веб-сайт http://www.habitat.co.uk/ использует систему замены текста элементами холста, чтобы можно было отображать пользовательские шрифты.

Может кто-нибудь помочь мне понять, как они это делают?

Answer 1

Они используют @ font-face, и это фактический css от http://www.habitat.co.uk/

@font-face{
    font-family:'DINHabitatBold';
    src:url('dinhabbd-webfont.eot');
    src:local('?'),url('dinhabbd-webfont.woff') format('woff'),url('dinhabbd-webfont.ttf') format('truetype'),url('dinhabbd-webfont.svg#webfontuqLLqO9I') format('svg');
    font-weight:normal;
    font-style:normal;
}

Answer 2

Просматривая исходный код, вы видите, что для этого они использовали замену шрифта cufon.

http://cufon.shoqolate.com/generate/

Вот хороший учебник, с которого можно начать -> http://net.tutsplus.com/articles/news/the-easiest-way-to-use-any-font-you-wish/

У вас есть и другие методы, такие как @ font-face, которые, на мой взгляд, гораздо проще реализовать.