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

【问题标题】：How do I load external fonts into an HTML document?如何将外部字体加载到 HTML 文档中？
【发布时间】：2011-01-15 07:17:42
【问题描述】：

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

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

【问题讨论】：

标签： html fonts

【解决方案1】：

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

【讨论】：

【解决方案2】：

看看这个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 在 cmets 中指出的那样，如果将字体转换为 EOT format，则可以使其与 IE 一起使用。

好消息是，这似乎在旧版浏览器中可以正常降级，因此只要您意识到并非所有用户都会看到相同的字体这一事实并对此感到满意，就可以安全地使用它。

【讨论】：

IE 8 确实支持它，但您需要将字体转换为 OTF。网络字体有点……涉及。见snook.ca/archives/html_and_css/becoming-a-font-embedding-master

【解决方案3】：

关于 Jay Stevens 的回答：“可在 HTML 文件中使用的字体必须存在于用户的机器上并且可以从 Web 浏览器访问，因此除非您想通过单独的外部进程将字体分发到用户的机器上，做不到。”没错。

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

【讨论】：

【解决方案4】：

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

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

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

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

【讨论】：

Cufon 似乎被抛弃了。有什么选择吗？

【解决方案5】：

Microsoft 拥有包含嵌入字体的专有 CSS 方法 (http://msdn.microsoft.com/en-us/library/ms533034(VS.85).aspx)，但可能不建议这样做。

我之前使用过sIFR，因为它非常有效 - 它使用 Javascript 和 Flash 将普通文本动态替换为包含所需字体的相同文本的一些 Flash（该字体嵌入在 Flash 文件中）。这不会影响文本周围的标记（它通过使用 CSS 类起作用），您仍然可以选择文本，如果用户没有 Flash 或禁用它，它将优雅地降级为任何字体的文本您在 CSS 中指定（例如 Arial）。

【讨论】：

它并不是真正的专有：其他浏览器都支持@font-face，所以它正在被标准化。（而且我相信他们也向标准机构提供了他们专有的字体格式。）
好吧，WEFT格式已经被标准机构提出来了，但是我没想到现在其他浏览器也支持这个，而且我链接的文章提到了Internet Explorer 4.0，所以在这方面，它似乎是要避开的。

【解决方案6】：

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。

【讨论】：

【解决方案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>

【讨论】：

【解决方案8】：

我没有看到对 Raphael.js 的任何引用。所以我想我会把它包括在这里。 Raphael.js 一直向后兼容到 IE5 和非常早期的 Firefox 以及所有其他浏览器。可以时使用 SVG，不能时使用 VML。你用它做的就是在画布上画画。有些浏览器甚至会让您选择生成的文本。 Raphael.js 可以在这里找到：

http://raphaeljs.com/

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

【讨论】：