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

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

示例：使用HTML CSS和/或JAVASCRIPT在相同目录中的TTF文件中创build文本“等等等等”

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

保罗爱尔兰有办法做到这一点，涵盖了大部分常见问题。 看他的防弹@ 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一起使用，如果浏览器不支持@font-face ，只加载Cufon。

Answer 3

CSS3提供了一种使用@ font-face规则的方法。

http://www.w3.org/TR/css3-webfonts/#the-font-face-rule

http://www.css3.info/preview/web-fonts-with-font-face/

以下是在不支持@ font-face规则的浏览器中可以使用的许多不同的方法。

Answer 4

关于Jay Stevens的回答是：“HTML文件中可以使用的字体必须存在于用户的机器上，并且可以通过网页浏览器访问，所以除非你想通过一个单独的外部程序把字体分配给用户的机器，不要做。“ 确实如此。

但有另一种方法使用JavaScript /帆布/闪光 – 非常好的解决scheme给cufon： http ://cufon.shoqolate.com/generate/库，生成一个非常容易使用外部字体的方法。

Answer 5

如果你想支持比CSS3更多的浏览器，你可以看看开源库cufon javascript库

这里是API ，如果你想做更多的时髦的东西。

主要专业：允许你做你想要的或需要的。

主要缺点：在某些浏览器中不允许select文本，因此使用适用于标题文本（但是，如果需要，您可以在所有网站中使用它）

Answer 6

微软有一个专有的包含embedded字体的CSS方法（ http://msdn.microsoft.com/en-us/library/ms533034(VS.85).aspx ），但是这可能不应该被推荐。

我之前使用过sIFR ，因为它的工作原理非常好 – 它使用Javascript和Flashdynamicreplace普通文本，其中一些Flash包含您想要的字体（字体embedded在Flash文件中）中相同的文本。 这不会影响文本周围的标记（它通过使用CSS类来工作），您仍然可以select文本，并且如果用户没有Flash或禁用了Flash，它将优雅地降级到任何字体的文本你在CSS中指定（例如Arial）。

Answer 7

尝试这个

 <style> @font-face { font-family: Roboto Bold Condensed; src: url(fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf); } @font-face { font-family:Roboto Condensed; src: url(fonts/Roboto_Condensed/RobotoCondensed-Regular.tff); } div1{ font-family:Roboto Bold Condensed; } div2{ font-family:Roboto Condensed; } </style> <div id='div1' >This is Sample text</div> <div id='div2' >This is Sample text</div> 

Answer 8

我没有看到任何提及Raphael.js。 所以我想我会把它包括在这里。 Raphael.js向后兼容IE5和非常早期的Firefox以及所有其他浏览器。 它可以使用SVG，不能使用VML。 你用它做什么是画在canvas上。 有些浏览器甚至会让你select生成的文本。 Raphael.js可以在这里find：

http://raphaeljs.com/

它可以像创build您的纸张绘图区域一样简单，指定字体，字体重量，大小等等，然后告诉它将您的string放在纸上。 我不确定它是否能解决授权问题，但它正在绘制文本，所以我相当确定它是否规避了授权问题。 但请检查你的律师确定。 🙂