wake-up-neo.com

如何在HTML中嵌入字体?

我试图找出一个体面的解决方案(特别是从SEO方面)在网页中嵌入字体。到目前为止,我已经看到 W3C解决方案 ,它甚至不适用于Firefox,和 这个非常酷的解决方案 。第二种解决方案仅适用于标题。是否有可用于全文的解决方案?我厌倦了网页的标准字体。

谢谢!

77
Dan Rosenstark

事情发生了变化 因为这个问题最初是被问到并回答的。使用@ 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 kits

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

最近,谷歌已经开始提供 Google Web Fonts ,这是一种在开源许可下提供的各种字体,由Google的服务器提供。

许可限制

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

131
fencepost

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

9
Martin Meixger

不,没有一个体面的体型解决方案,除非你愿意只迎合那些有流行边缘浏览器的人。

微软有 _ weft _ ,他们自己专有的字体嵌入技术,但多年来我都没有听过它,我知道没有人使用它。

我使用sIFR获取显示类型(标题,博客文章的标题等),并使用一种较少破旧的网络安全字体作为体型(如Trebuchet MS)。如果你对所有网页安全字体感到厌倦,你可能会过于狭隘地定义这个术语 - 看看 这个字体字体矩阵 与主要操作系统一起提供的机会你很有可能找到一个字体级联,几乎可以捕获所有Web用户。

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

6
savetheclocktower

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

4
olliej

退房 Typekit ,商业选项(他们也有免费套餐)。

它使用不同的技术,具体取决于使用的浏览器(@font-faceEOT格式),它们也会为您处理所有字体许可问题。它支持IE6的所有功能。

以下是有关Typekit如何工作的更多信息:

3
philfreo

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

2
Marcus Downing