如何在HTML中嵌入字体？

Question

如何在HTML中嵌入字体？

87

我正在尝试找出一种在网页中嵌入字体的良好解决方案（尤其是从SEO方面考虑）。到目前为止，我看到了 W3C的解决方案，但它甚至不能在Firefox上工作，并且这个相当不错的解决方案只适用于标题。是否有可用于全文的解决方案？我已经厌倦了网页标准字体。

谢谢！

- Daniel Rosenstark

X-Ref 如何将一些非标准字体添加到网站上？ - hakre

可能是网络字体的重复问题。 - user2284570

2

@user2284570 这个问题有一个更好的答案。我已经将另一个问题关闭，将其作为这个问题的重复。 - Madara's Ghost

这个问题有更新的答案吗？所有的答案都超过了半个十年。如果有人知道，我也找不到MDN上的参考资料。 - 1.21 gigawatts

请提供一个更新的答案，帮助世界。我自己从2011年以来就没有做过HTML。 - Dan Rosenstark

6个回答

9

尝试使用Facetype.js，将您的.TTF字体转换为Javascript文件。完全兼容SEO，支持FF，IE6和Safari，并在其他浏览器上平稳降级。

- meiXger

2

对于那些想知道它是如何工作的人，它使用画布标签（HTML 5）或VML。 - Chris S

1

我必须同意这个解决方案，它看起来非常简单，并且似乎在我测试的每个浏览器上都能正常工作。 - askon

1

这个链接已经失效了。 - aleclarson

6

不，除非你只想迎合那些使用最新浏览器的人，否则没有一个体型的好解决方案。

微软有自己的专有字体嵌入技术WEFT，但我已经很多年没有听说过它了，也不认识任何使用它的人。

对于展示类型（标题、博客文章标题等），我使用sIFR，对于正文类型，则使用一种不太常用的Web安全字体（如Trebuchet MS）。如果你对所有Web安全字体都感到无聊，那么你可能将该术语定义得太狭窄了——查看此存储在主要操作系统中的标准字体矩阵，你很可能能够找到一个字体级联，可以覆盖几乎所有的Web用户。

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

- savetheclocktower

2

让我也站在肥皂盒上说几句：虽然我希望 Windows 有更多“好”的字体（OS X 拥有印刷史上最伟大的字体：Futura，Helvetica，Gill Sans 等），但是我们在挑选字体时需要克制自己还是件好事。自由也可能被用于邪恶。 - savetheclocktower

不针对你的评论，但感谢你的回答。太好了。有级联列表吗？再次感谢。 - Dan Rosenstark

这里有一个列表：（http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html）。它比较保守，只列出在各个平台上完全相同或几乎相同的字体。你可能需要进行比较，看看哪种“安全”字体最接近你的“冒险”字体。 - savetheclocktower

（噢，而且：始终指定一个一般的回退 - 无衬线体、有衬线体或等宽字体。这样，即使用户没有您要求的任何字体，它至少也会与你期望的接近。） - savetheclocktower

1

我所工作的网站上大多数用户仍在使用IE6（那些混蛋），因此从这个角度来看，我认为最新的主要版本是前沿的。 - Gene

显示剩余2条评论

4

而且这也不太可能——EOT是一种相当受限制的格式，只有IE支持。Safari 3.1和Firefox 3.1（当前的alpha版）以及可能的Opera 9.6都支持TrueType字体（ttf）嵌入，并且至少Safari通过相同的机制支持SVG字体。A List Apart曾经对此进行了很好的讨论，可以参考这篇文章。

- olliej

3

看看Typekit，这是一个商业选项（他们也有免费的套餐可用）。

它使用不同的技术，取决于使用哪个浏览器（@font-face vs. EOT格式），并且他们还为您处理所有字体许可问题。它支持IE6及以下版本。

以下是关于Typekit如何工作的更多信息：

- philfreo

2

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

- sadie

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- fencepost · Accepted Answer

自从这个问题最初被提出和回答以来情况已经发生了变化。在使用@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 Squirrel还拥有数百个@font-face工具包。

Soma Design 还开发了FontFriend书签，可在页面上实时重新定义字体，以便您可以尝试不同的字体。它还包括在FireFox 3.6+中的拖放@font-face支持。

最近，Google开始提供Google Web Fonts，一组以开源许可证提供的字体，并由Google服务器提供服务。

许可限制

最后，WebFonts.info编写了一个很好的维基列表，列出可用于@font-face嵌入的字体，基于许可证。它并未声称是一个详尽的列表，但其中的字体应该可以用于嵌入/链接（可能在CSS文件中需要归属）。阅读许可证很重要，因为有一些限制并不明显地表现在字体下载上。