如何在HTML中嵌入字体？

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

谢谢!

1> fencepost..：

---

自从这个问题最初被问及并回答以来,情况发生了变化 在使用@ 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支持.

最近,谷歌开始提供谷歌网络字体,这是一种在开源许可下提供的各种字体,并由谷歌的服务器提供.

许可限制

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

---

我认为值得强调的是,即使您已经合法地购买了该字体的许可证并且需要很多钱,也不会自动允许您使用字体和@ font-face-ize.您需要检查字体的许可证,以确定是否允许进行此类电子重新分发.侵权行为很容易被发现和拖网,否则可能很容易出现问题,特别是如果您是位于正确辖区的公司.

2> Martin Meixg..：

---

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

---

对于那些想知道它是如何工作的人来说,它使用canvas标签(html 5)或VML.

3> savetheclock..：

---

不,没有一个体面的体型解决方案,除非你愿意只迎合那些拥有尖端浏览器的人.

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

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

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

---

让我也站在肥皂盒上一会儿:虽然我希望Windows有更多"好"的字体(OS X有最大的排版历史记录:Futura,Helvetica,Gill Sans等),这是一件好事,我们有在挑选字体时要克制自己.自由也可以用于邪恶.