Question

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

实施例：使用HTML CSS和/或JAVASCRIPT在同一目录中的TTF文件中创建“blah blah blah blah blah blah blah blah blah”自定义字体

Answer 1

看看这个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。

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

Answer 2

Paul Irish有办法解决大多数常见问题。见他的bullet-proof @font-face article：

最终变体，阻止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");
}

他还链接到generator，将字体转换为您需要的所有格式。

正如其他人已经指定的那样，这只适用于最新一代的浏览器。最好的办法是将它与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/

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

Answer 4

关于Jay Stevens回答：“HTML文件中可用的字体必须存在于用户的机器上，并且可以从Web浏览器访问，因此除非您想通过单独的外部进程将字体分发到用户的机器上，它无法完成。“那是真的。

但还有另一种使用javascript / canvas / flash的方法 - 非常好的解决方案为cufon：http://cufon.shoqolate.com/generate/库提供了一个非常易于使用的外部字体方法。

Answer 5

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

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

Major Pro：允许你做你想要/需要的事。

Major Con：禁止在某些浏览器中选择文本，因此在标题文本上使用是合适的（但如果需要，您可以在所有网站中使用它）

Answer 6

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

我之前使用过sIFR因为这很好用 - 它使用Javascript和Flash动态替换普通文本，其中一些Flash包含所需字体中的相同文本（字体嵌入Flash文件中）。这不会影响文本周围的标记（它通过使用CSS类工作），您仍然可以选择文本，如果用户没有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。你用它做的是画在画布上。有些浏览器甚至会让您选择生成的文本。 Raphael.js可以在这里找到：

http://raphaeljs.com/

它可以像创建纸质绘图区域一样简单，指定字体，字体粗细，大小等等，然后告诉它将您的文本字符串放在纸上。我不确定它是否解决了许可问题，但它正在绘制文本，所以我相当肯定它确实绕过了许可问题。但请与您的律师确认一下。： - ）

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

8 个答案: