自定義網頁字體

Question

我相信網站http://www.habitat.co.uk/使用了一個用canvas元素替換文本的系統，這樣就可以呈現自定義字體。

任何人都可以幫我弄清楚他們是怎麼做到的嗎？

Answer 1

在查看源代碼時，您可以看到他們使用cufon字體替換來執行此操作。

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

這裏是一個很好的教程，讓你開始 - >http://net.tutsplus.com/articles/news/the-easiest-way-to-use-any-font-you-wish/

你還有其他方法，如@字體面這在我看來是更容易實現。

Answer 2

他們正在使用@ fontface，這是實際的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; 
}