自定义网页字体

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