83

我试图找出一个体面的解决方案（尤其是从 SEO 方面）在网页中嵌入字体。到目前为止，我已经看到了 W3C 解决方案，它甚至在 Firefox 上都不起作用，而且这个非常酷的解决方案。第二种解决方案仅适用于标题。是否有可用于全文的解决方案？我厌倦了网页的标准字体。

谢谢！

4

6 回答 6

139

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

Paul Irish 将Bulletproof @font-face 语法结合了多个其他人的尝试。如果您实际上浏览了整篇文章（不仅仅是顶部），它允许使用单个 @font-face 语句来涵盖 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-face 生成器，它允许您上传 TTF 或 OTF 文件并获取其他类型的自动转换字体文件，以及预构建的 CSS 和一个演示 HTML 页面。字体松鼠也有数百个@font-face 套件。

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

最近，Google 开始提供Google Web Fonts，这是在开源许可下提供的各种字体，由 Google 的服务器提供服务。

许可限制

最后，WebFonts.info 整理了一个很好的 wiki 字体列表，可用于基于许可证的@font-face 嵌入。它并没有声称是一个详尽的列表，但它上面的字体应该可以用于嵌入/链接（可能有条件，例如 CSS 文件中的属性）。阅读许可证很重要，因为在字体下载中存在一些没有明显推进的限制。

于 2009-12-27T22:27:59.597 回答
9

试试Facetype.js，你将你的 .TTF 字体转换成一个 Javascript 文件。完全兼容 SEO，支持 FF、IE6 和 Safari，并在其他浏览器上优雅降级。

于 2009-02-15T11:22:38.023 回答
6

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

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

我使用 sIFR 作为显示类型（标题、博客文章的标题等），并使用一种不太陈旧的网络安全字体作为正文类型（如 Trebuchet MS）。如果你对所有的网络安全字体感到厌烦，你可能对这个术语的定义过于狭隘——看看这个随主要操作系统提供的库存字体矩阵，你很有可能会找到一个字体级联，它将抓住几乎所有的网络用户。

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

于 2008-10-20T23:17:32.353 回答
4

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

于 2008-10-20T23:06:55.853 回答
3

查看Typekit，一个商业选项（他们也有一个免费的包）。

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

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

于 2009-12-27T22:29:50.013 回答
2

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

于 2008-10-20T23:17:28.627 回答