自定义网页字体

Question

我相信网站 http://www.habitat.co.uk/ 使用替换文本系统与画布元素，以便可以呈现自定义字体。

谁能帮我弄清楚他们是如何做到的？

Answer 1

查看源代码时，您可以看到他们使用 cufon 字体替换来执行此操作。

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

这是一个很好的教程，可以帮助您入门-> http://net. tutsplus.com/articles/news/the-easiest-way-to-use-any-font-you-wish/

您还有其他方法，例如@font-face，在我看来，它更容易实现。

Answer 2

他们正在使用 @font-face，这是来自 http://www.habitat.co.uk/ 的实际 css

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