首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何将外部字体加载到HTML文档?

如何将外部字体加载到HTML文档?
EN

Stack Overflow用户
提问于 2010-02-10 22:40:44
回答 8查看 195.5K关注 0票数 65

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

示例:使用HTML CSS和/或JAVASCRIPT从同一目录中的TTF文件中将文本"blah blah“设置为自定义字体

EN

回答 8

Stack Overflow用户

回答已采纳

发布于 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兼容。

好消息是,这似乎会在较老的浏览器中优雅地退化,所以只要你意识到并适应不是所有用户都会看到相同字体的事实,它就可以安全地使用。

票数 93
EN

Stack Overflow用户

发布于 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。

票数 24
EN

Stack Overflow用户

发布于 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规则的浏览器中工作。

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/2237540

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档