如何在 HTML 中嵌入字体？

IT技术 javascript html flash fonts embed
2021-01-31 11:44:59

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

谢谢！

6个回答

自从最初提出和回答这个问题以来，情况发生了变化。使用@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 Generator，它允许您上传 TTF 或 OTF 文件并获取其他类型的自动转换字体文件，以及预构建的 CSS 和一个演示 HTML 页面。Font Squirrel 也有数百个@font-face 工具包。

Soma Design 还将FontFriend Bookmarklet放在一起，它可以动态重新定义页面上的字体，以便您可以尝试一下。它包括 FireFox 3.6+ 中的拖放 @font-face 支持。

最近，Google 开始提供Google Web Fonts，这是在开放源代码许可下可用并从 Google 的服务器提供的各种字体。

许可证限制

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

我认为值得强调的是，即使您以大量金钱合法购买了该字体的许可证，也不会自动允许您使用字体并@font-face-ize。您需要检查字体的许可证是否允许这种电子重新分发。侵权很容易被发现和追踪，否则很容易遇到麻烦，特别是如果您是一家位于正确司法管辖区的公司。
2021-03-17 11:44:59
迷人的东西。出于好奇，你是怎么找到这篇文章的？同一天有不止一个回答，对你的回答有好几条评论。+1...
2021-03-21 11:44:59
我不记得我是如何结束的——也许是搜索 HTML 字体，但我做出了回应，因为我正在圣诞节前为客户做这个，所以信息是新鲜的。我想 Pekka 认为这是旧帖子上的新活动；我不知道系统是否会标记尝试发布多个链接（我知道它最初被阻止）但我认为这可能是“检查这个以确保它不是垃圾邮件”的情况。
2021-03-21 11:44:59
@Pekka“侵权很容易被发现和拖网”......你能不能让我启发一下......这种检测和拖网是如何完成的，在什么情况下会发生？
2021-04-02 11:44:59
FontSquirrel 在其预先构建的字体工具包和其生成器中都明确指出了这一点（这需要您验证字体是否实际获得了此类使用的许可）。还有其他转换工具，但我不知道哪些是讨论许可的重点。
2021-04-08 11:44:59

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

对于那些想知道它是如何工作的人，它使用 canvas 标签 (html 5) 或 VML。
2021-03-17 11:44:59
我不得不同意这个解决方案，它看起来非常简单，而且似乎适用于我扔给它的每个浏览器。
2021-03-18 11:44:59
这个链接已经死了。
2021-03-21 11:44:59

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

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

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

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

这是一个列表：（ampsoft.net/webdesign-l/WindowsMacFonts.html）。这是保守的，只列出跨平台相同（或几乎相同）的字体。您可能需要进行比较，以查看哪种“安全”字体与您的“危险”字体最相似。
2021-03-14 11:44:59
大多数访问我工作的站点的用户仍然使用 IE6（那些混蛋）所以从这个角度来看，我认为最新的主要版本是最前沿的。
2021-03-15 11:44:59
不对您的评论发表评论，但感谢您的回答。那太棒了。某处是否有级联列表？再次感谢。
2021-03-18 11:44:59
让我也站在肥皂盒上一分钟：虽然我希望 Windows 有更多“好”的字体（OS X 拥有排版史上最成功的字体：Futura、Helvetica、Gill Sans 等），但我们拥有它是一件好事选择字体时要克制自己。自由也可以用于邪恶。
2021-03-24 11:44:59
（哦，还有：总是指定一个通用的后备——无衬线、衬线或等宽。这样，它至少会在大概范围内，如果用户没有你请求的字体。）
2021-04-02 11:44:59

而且这也不太可能——EOT 是一种限制性相当强的格式，仅由 IE 支持。Safari 3.1 和 Firefox 3.1（以及当前的 alpha）以及可能的 Opera 9.6 都支持 True Type 字体 (ttf) 嵌入，至少 Safari 通过相同的机制支持 SVG 字体。列表除了有关于这个一会儿好商量回。

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

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

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

其它你可能感兴趣的问题
上一篇$(function() {} ); 做？ 下一篇使用 jquery 检查 div 是否有溢出元素