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

Question

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

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

Answer 1

看看这篇一篇列出的文章。相关的 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 格式。

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

Answer 2

Paul Irish 有一种方法可以解决大多数常见问题。请参阅他的防弹@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 文件中使用的字体必须存在于用户的计算机上并且可以通过 Web 浏览器访问，因此除非您想通过单独的外部进程将字体分发到用户的计算机，否则它可以没完没了。”这是真的。

但还有另一种使用 javascript / canvas / flash 的方法 - 非常好的解决方案给出了 cufon： http://cufon.shoqolate .com/generate/ 库，生成一个非常好用的外部字体方法。

Answer 5

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

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

主要优点：允许您做您想做/需要的事情。

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

Answer 6

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

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

http://raphaeljs.com/

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

Answer 9

作为另一种方式，您可以使用 Google Fonts CSS API。尝试在此处查找您的字体。

这是非常有用的东西。 Google Fonts 拥有庞大的免费字体库。您甚至可以请求单个字母进行优化。