如何在 HTML 中嵌入字体

自从最初提出和回答这个问题以来，情况发生了变化。在使正文文本的跨浏览器字体嵌入使用人脸嵌入工作方面已经做了大量工作@font。

Paul Irish 将 Bulletproof @font-face 语法组合在一起，结合了多个其他人的尝试。如果你真的通读了整篇文章（不仅仅是顶部），它允许一个@font面语句来涵盖IE，Firefox，Safari，Opera，Chrome和其他可能的内容。基本上，这可以以不破坏任何东西的方式馈送OTF，EOT，SVG和WOFF。

从他的文章截取：

@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");
}

在此基础上，Font Squirrel汇集了各种有用的工具，包括@font面生成器，它允许您上传TTF或OTF文件并获得其他类型的自动转换字体文件，以及预先构建的CSS和演示HTML页面。Font Squirrel也有数百个@font面套件。

Soma Design还整合了FontFriend Bookmarklet，它可以在页面上重新定义字体，以便您可以尝试。它包括FireFox 3.6+中的拖放式@font面支持。

开始提供谷歌网络字体，这是一种在开源许可下可用的各种字体，可以从谷歌的服务器提供。

许可证限制

最后，WebFonts.info 整理了一个不错的wiki字体列表，其中包含可用于基于许可证的@font面嵌入的字体。它并没有声称是一个详尽的列表，但它上的字体应该可用于嵌入/链接（可能带有 CSS 文件中的属性等条件）。阅读许可证很重要，因为字体下载上有一些限制没有明显地向前推进。

尝试面部类型.js，您可以转换您的 .TTF 字体转换为 Javascript 文件。完全兼容 SEO，支持 FF、IE6 和 Safari，并在其他浏览器上优雅地降级。

不，对于体型没有像样的解决方案，除非你愿意只迎合那些使用尖端浏览器的人。

Microsoft有WEFT，他们自己专有的字体嵌入技术，但我已经很多年没有听说过它了，我知道没有人使用它。

我使用sIFR表示显示类型（标题，博客文章标题等），并使用一种不太陈旧的Web安全字体作为体型（如Trebuchet MS）。如果你厌倦了所有的网页安全字体，你可能把这个术语定义得太狭隘了——看看这个主要操作系统附带的库存字体矩阵，你很可能会找到一个字体级联，几乎可以抓住所有的网络用户。

例如：font-family: "Lucida Grande", "Verdana", sans-serif是常见的字体级联;OS X附带Lucida Grande，但使用Windows的用户将获得Verdana，这是一种Web安全字体，其大小和形状与Lucida Grande相似。如果Linux用户安装了大多数发行版的软件包管理器中存在的Web安全字体包，他们也将获得Verdana，否则他们将退回到普通的无衬线字体。

也不太可能 - EOT是一种相当严格的格式，仅受IE支持。 Safari 3.1 和 Firefox 3.1（以及当前的 alpha）以及可能的 Opera 9.6 都支持真类型字体 （ttf） 嵌入，至少 Safari 通过相同的机制支持 SVG 字体。 不久前，一个列表对此进行了很好的讨论。

查看Typekit，一个商业选项（他们也提供免费软件包）。

它根据所使用的浏览器（@font-face与 EOT格式），他们也为您处理所有字体许可问题。 它支持IE6的所有内容。

以下是有关 Typekit 工作原理的更多信息：

• http://forabeautifulweb.com/blog/about/first_impressions_of_typekit
• http://www.sitepoint.com/blogs/2009/06/01/web-fonts-get-real-with-typekit/

我不久前问过这个问题。答案基本上是它不起作用。:(