如何将外部字体加载到HTML文档中？

Question

如何将外部字体文件加载到HTML文档中.

示例:使用HTML CSS和/或JAVASCRIPT在同一目录中的TTF文件中创建文本"blah blah blah blah blah blah blah blah blah"自定义字体

Answer 1

看一下这篇A List Apart文章.相关的CSS是:

@font-face {
  font-family: "Kimberley";
  src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format("truetype");
}
h1 { font-family: "Kimberley", sans-serif }

以上内容适用于Chrome/Safari/FireFox.正如Paul D. Waite在评论中指出的那样,如果将字体转换为EOT格式,则可以使用IE .

好消息是,这似乎在旧浏览器中优雅地降级,因此只要您意识到并且不熟悉并非所有用户都会看到相同的字体,那么使用它是安全的.

Answer 2

Paul Irish有办法解决大多数常见问题.看他的防弹@ font-face文章:

最终变体,阻止IE下载不必要的数据,并在IE8,Firefox,Opera,Safari和Chrome中工作,如下所示:

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('Graublau Web Regular'), local('Graublau Web'),
    url("GraublauWeb.woff") format("woff"),
    url("GraublauWeb.otf") format("opentype"),
    url("GraublauWeb.svg#grablau") format("svg");
}

他还链接到一个生成器,将字体转换为您需要的所有格式.

正如其他人已经指定的那样,这只适用于最新一代的浏览器.你最好的选择是将它与Cufon一起使用,如果浏览器不支持,只加载Cufon @font-face.