logo标签列表

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

htmlfonts
68

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

示例：使用HTML、CSS和/或JavaScript，将文本“blah blah blah blah blah blah blah”设置为位于同一目录中的TTF文件的自定义字体。

9个回答
100

看一下这个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浏览器上工作。

好消息是，在旧版浏览器中似乎会逐渐降级，因此只要您知道并接受不是所有用户都能看到相同的字体，就可以放心使用。

5
IE 8支持此功能，但需要将字体转换为OTF格式。网络字体需要一些额外步骤。请参见http://snook.ca/archives/html_and_css/becoming-a-font-embedding-master。 - Paul D. Waite
26

Paul Irish有一种方法可以解决大多数常见问题。请参阅他的bullet-proof @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。

3
1

试试这个

<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>
1
关于Jay Stevens的回答：“在HTML文件中可用的字体必须存在于用户的计算机上，并且可以从Web浏览器访问，因此，除非您想通过单独的外部过程将字体分发到用户的计算机上，否则无法完成。”这是正确的。
但是还有另一种方法，使用javascript / canvas / flash - 非常好的解决方案是cufon：http://cufon.shoqolate.com/generate/库，它生成了一种非常易于使用的外部字体方法。
1

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

这里是API，如果你想做更酷炫的东西。

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

主要缺点：在某些浏览器中禁止文本选择，因此在标题文本上使用是合适的（但如果你愿意，也可以在整个网站上使用）。

Cufon似乎已经被放弃了，有没有其他替代方案呢？ - TheTechRobo the Nerd
1

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

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

这并不是专有的：其他浏览器也支持@font-face，因此它正在标准化。 （我相信他们也向标准机构提供了他们的专有字体格式。） - Paul D. Waite
嗯，很好，WEFT格式已经被提议给标准机构了，但我认为目前其他浏览器不支持它。我提供的文章提到了Internet Explorer 4.0，因此在这方面似乎是要避开的东西。 - Graham Clark
0

我没有看到关于Raphael.js的任何参考资料。所以我想在这里加入它。Raphael.js向后兼容到IE5和早期版本的Firefox，以及其他所有浏览器。它在可以使用SVG时使用SVG，在无法使用SVG时使用VML。你可以用它来绘制画布。有些浏览器甚至可以让你选择生成的文本。Raphael.js可以在这里找到：

http://raphaeljs.com/

它可以非常简单，只需创建您的纸张绘图区域，指定字体、字重、大小等，然后告诉它将您的文本字符串放在纸上。我不确定它是否绕过了许可问题，但它正在绘制文本，所以我相当肯定它确实规避了许可问题。但是请与您的律师核实。

0
作为额外的方式，您可以使用Google Fonts CSS API。在这里尝试找到您的字体here。
这是非常有用的东西。Google Fonts拥有大量免费字体库。您甚至可以请求单个字母进行优化。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接