如何将外部字体文件加载到HTML文档中。
示例:使用HTML CSS和/或JAVASCRIPT从同一目录中的TTF文件中将文本"blah blah“设置为自定义字体
发布于 2010-02-10 22:43:42
看看这个A List Apart article。相关的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 format,你就可以让它与IE兼容。
好消息是,这似乎会在较老的浏览器中优雅地退化,所以只要你意识到并适应不是所有用户都会看到相同字体的事实,它就可以安全地使用。
发布于 2010-02-10 23:22:23
Paul爱尔兰有一种方法可以解决大多数常见问题。查看他的bullet-proof @font-face article
最后一个变种,它阻止IE下载不必要的数据,并在IE8、火狐、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");
}
他还链接到一个generator,它将把字体翻译成你需要的所有格式。
正如其他人已经指定的,这将只在最新一代的浏览器中工作。你最好的办法是将它与Cufon之类的东西结合使用,并且只有在浏览器不支持@font-face
的情况下才加载Cufon。
发布于 2010-02-10 22:43:00
CSS3提供了一种使用@font-face规则的方法。
http://www.w3.org/TR/css3-webfonts/#the-font-face-rule
http://www.css3.info/preview/web-fonts-with-font-face/
Here有许多不同的方式,可以在不支持@font-face规则的浏览器中工作。
https://stackoverflow.com/questions/2237540
复制相似问题