如何在 HTML 中嵌入字体？

https://stackoverflow.com/questions/220236

03-07-2019
|

题

我正在尝试找出一个在网页中嵌入字体的不错的解决方案（特别是从搜索引擎优化方面）。到目前为止我已经看到了 W3C 解决方案, ，甚至在 Firefox 上都不起作用，并且这个很酷的解决方案. 。第二种解决方案仅适用于标题。有没有全文的解决方案？我厌倦了网页的标准字体。

谢谢！

解决方案

事情发生了变化，因为这个问题最初被问及并得到了解答。使用@ font-face嵌入使用正文文本的跨浏览器字体嵌入工作已经完成了大量的工作。

Paul Irish将 Bulletproof @ font-face syntax 结合在一起来自其他多个人的尝试。如果您真正浏览整篇文章（不仅仅是顶部），它允许单个@ 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网络字体，这是一种可用的字体。开源许可证，由Google服务器提供。

许可限制

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

其他提示

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

不，除非你愿意只为那些拥有最前沿浏览器的人提供服务，否则没有合适的身体类型解决方案。

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

我使用sIFR获取显示类型（标题，博客帖子的标题等），并使用一种较少破旧的网络安全字体作为体型（如Trebuchet MS）。如果您对所有网络安全字体感到厌倦，那么您可能过于狭隘地定义了这个术语＆＃8212;＆nbsp;看看这个库存字体矩阵附带主要操作系统和机会，你将能够找到一个字体级联这将几乎吸引所有网络用户。

例如： font-family：＆quot; Lucida Grande＆quot;，＆quot; Verdana＆quot; sans-serif 是一种常见的字体级联; OS X附带Lucida Grande，但那些使用Windows的用户将获得Verdana，这是一种网络安全字体，字体大小和形状与Lucida Grande相似。 Linux用户如果安装了大多数发行版包管理器中存在的Web安全字体包，也会获得Verdana，否则它们将回归到普通的sans-serif。

并且它不太可能 - EOT是一种相当严格的格式，只有IE才支持。 Safari 3.1和Firefox 3.1（以及当前的alpha）和可能的Opera 9.6都支持真实字体（ttf）嵌入，并且至少Safari通过相同的机制支持SVG字体。一个单独的列表有一个很好的讨论有一段时间返回。

查看类型套件, ，一个商业选项（他们也有免费的软件包）。

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

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

我问了这个一会儿。答案基本上是它不起作用。：（

许可以下： CC-BY-SA 和归因

不隶属于 StackOverflow